What happens when you’ve got an error occurring only in the minified version of your Dojo application?
No matter how fantastic your debugging tool, there’s not much it can do with an optimised JavaScript source file with all the code on a single line. Usually, you resort to the frustrating experience of “black boxing” the issue, interrogating objects in the console and trying to reverse engineer the meaning of their renamed variables.
Luckily, there’s a better way to debug minified JavaScript files… Source Maps.
Introducing Source Maps
Source maps provide a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools can parse the source map automatically and make it appear as though you’re running unminified and uncombined files.
There’s an fantastic overview of the technology here, showing you how to enable support in your browser and generate the necessary files using Google’s Closure compiler.
Generating Source Maps For Dojo
The Dojo Toolkit’s build system supports using the Closure compiler for minification, making it an obvious next step to enable automatic generation of source mappings. Working on this over the weekend, I’ve been able to enhance the build system to generate source maps for each layer file when using the following command line parameter.
$ sh build.sh bin=node action=release profile=my_profile layerOptimize=closure
For more details on the implementation, along with the patch, see the associated ticket that’s been opened to track adding this feature into Dojo.
When you’ve enabled source maps in your browser, switching to the scripts tab in Chrome’s Developer Tools now displays the unminified versions of any built layer files. This can be seen in action on the following page.
Please note, this feature is only enabled when using NodeJS as the build runtime and requires an upgrade of the Closure compiler to the latest version.