Source map visualizer tool

(c) qfox.nl, jan 2013

Copy a source map (v3, make sure file paths are relative, and ajax GET-able from this page) in the textarea to the right, or select an example from the dropdown. Once processed (longer files take more time.., blame rendering), any map segment will show up in the compiled file. You can click on a segment to have the proper file loaded (multiple files supported) and jump to the proper position in that file. First character will be marked red. You can also enter a single VLQ in the segment test to see how it would be decoded (only deltas, no absolute values, of course). Hope the tool helps you :) You can drop this index.html into any project to test your source maps. This tool does not support the names array. It just ignores it, sorry :) You can read more about generating source maps in this blog post. You can also find this project on Github for your forking pleasure.

Segment test:
Source map examples:

map json

generated js

Resulting source:

    
Original source: