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…
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??
- 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).
- Closure compiler, let’s you set a flag to create a Source Map file.
- A Source Map file is created and place on your server beside your minified JS file.
- A comment is added to your minified JS file telling Chrome that the Source Map file exists, and where to find it.
- 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!