Source maps, for the uninitiated, are a means of mapping a compressed file back to its original source file and line number. During the compression step, you tell your compressor to generate a .map.js file in addition to the compressed file. While the source map spec is still sitting in a Google Doc (for real), the spec has been implemented by various parties (Mozilla, Google) and is usable today. Not only is this useful in error reporting, but you can also use source maps for debugging compressed source code on your production site! Chrome will auto-detect the map files in your compressed source and grab the original files, allowing you to set breakpoints inside compressed files while they are in the wild.
- Install the prerequisites on your machine doing the compressing:
Grab uglify.py from our django-compressor-sourcemaps repository and toss it in your application. We house it inside our common Django app.
- Change your settings variables to use the
COMPRESS_JS_COMPRESSOR = 'common.uglify.JsUglifySourcemapCompressor'
compress blocks. Since
uglifyjs can only compress files (and not inline JS blocks), we needed to refactor those blocks out into files (where they should have been in the first place).
Hit me up at @croby with any comments or questions!