The Breakpoint: Episode 3 – DevTools Source Maps, Shortcut Secrets And JSRun

The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani


In this episode, we take Coffeescript to JavaScript to Minified and all the way back with source maps. In addition to a new Coffeescript source map workflow, we cover the latest sourcemap updates so you can understand how to dramatically improve your debugging experience.

We also take you through a number of Source (and other panel) shortcuts for searching, filtering and navigating through files and methods as well as how to use text search in a few different scenarios.

Finally, Paul and I are joined by special guest—Yeoman core contributor Sindre Sorhus—to discuss what big new changes are coming to the project.

Notes from the show:


  1. I’m really intrigued by CofeeScript and minified JS, but have shied away for debugging reasons. The web application I’m working on is primarily used by IE8 users. For a base set of client-side libraries, we’re using RequireJS, jQuery, lodash, and KnockoutJS. With more and more of our application’s interactions moving to the client-side, we’ve had to deal with less-than-meaningful errors reported from our remote users via window.onerror and an ajax request. Those errors would be almost impossible to understand if our JS code were minified and didn’t contain line numbers. Is there a sourcemap/minification setup that would offer us equal debugging ability to what we have now?

  2. I nearly remember all the shortcuts in dev tools. And there is 2 KBSC is not working on windows or just windows 7. Ctrl+], Ctrl+Shift+O. Yeah the Ctrl+Shift+O open the bookmard tab. :). Fix it soon ?. I kind of don’t really have time to go all the way to chrome-bugs-post-site cause i got my job, really busy and you guys helps me out with Chrome dev tool. Thanks :)

  3. The styled console link in the notes has ” &0Aand ” appended to the end of the URL which makes it 404. Removing that will give the proper link.

  4. This is one of the most awesome crews on the web right now ! Thanks for sharing your knowledge, guys, really great topics in this episode ! I have 1 very very big question. What screen sharing utility are you using ? To me it looks like a google+ hangout, but mixed with some Chrome Remote Desktop. I would really like to know this because I think that this “app” or whatever it is would smooth things out for me at work. You rock!

    • We’re using a mix of hangout and desktop presenter, one of our internal tools for screensharing. That said, you should be able to use the standard hangout screenshare options to achieve a similar effect :)

  5. Thanks for the info Addy ! By the way, i think Yeoman is like… the web-dev’s lightsaber, at this point, thank you for that, too !

  6. Pingback: Source Maps 101 | Creative Online Journal by Emrah Akman

Leave a Reply

Required fields are marked *.