Skip to content

Source maps with closure compiler

Jump to bottom Edit New page
refractalize edited this page May 24, 2012 · 1 revision

An experiment in using Source Maps, mapping compiled javascript back into the original source file (coffee, pogo, unminified js, etc.)

  1. brew install closure-compiler
  2. Write some js into afile.js
  3. closure --create_source_map 'afile.js.map' --source_map_format V3 afile.js > afile.min.js
  4. Add the line //@ sourceMappingURL=afile.js.map to the bottom of afile.min.js. I have no idea why the closure compiler doens't do this for you.
  5. Write a HTML page that loads afile.js.map
  6. Point your browser (Firefox or Chrome) at the html page.
  7. Go to the browser debugger, open the settings and enable source maps.
  8. Check out the error in the console, it should be pointing to a source location in afile.js.

There's a node.js module for reading and writing source maps here: https://github.com/mozilla/source-maps

According to the documentation, you can have Closure Compiler add the sourceMappingURL to the bottom of the script with something like this:

--output_wrapper "%output%
//# sourceMappingURL=output.js.map"

being added to your call. Not that you cannot use "\n" here, and you need a newline literal. On a Linux shell this works just fine (if you're inside of quotes when you press enter, the command doesn't get executed).

Add a custom sidebar
Clone this wiki locally