Introduction to JavaScript Source Maps

Ever tried to find a bug in minified or obfuscated code?  Whether it is HTML, CSS or JS, it is a serious pain.  Until JS Source Maps appeared, that is…
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

The article is thorough (read: a little long, for some), so here is a demo:

  • Go here: http://www.thecssninja.com/demo/source_mapping/
  • Right click something in the obfuscated code and click the “Get original location” link that appears
  • Be amazed at what appears in the text box above the obfuscated code…

How does this voodoo work??

  1. Two requirements: 1) Use Google’s Closure compiler to combine/minify/obfuscate your JS files, and 2) Debug using Google Chrome (currently only Canary, with the “Enable source maps” setting checked).
  2. Closure compiler, let’s you set a flag to create a Source Map file.
  3. A Source Map file is created and place on your server beside your minified JS file.
  4. A comment is added to your minified JS file telling Chrome that the Source Map file exists, and where to find it.
  5. When you click that “Get original location” link, the Source Map file is fetched and the look-up is done.

Not completely ready for prime-time just yet, but coming soon!

Advertisements

One response to “Introduction to JavaScript Source Maps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s