Check out the following demonstration showing multi-level source maps for TypeScript and Coffeescript. If you haven’t enabled source maps you can do so in Chrome and WebKit Nightly by opening the dev tools > clicking the cog in the lower right corner > general > enable source maps.
In Firefox 23+ you can enable it in the build-in dev tools by going to Debugger > then clicking the cog in the top right corner > Show original sources.
Multi-level Source maps demo Download the source files
This sounds like a lot of work but if you have a build process involved it’s a matter of kicking of a simple cli command to do the work for you and it gives you the kick-arse ability of having the multi-level mappings.
Here are a few snippets on how you can get this going in CoffeeScript or TypeScript. For more info on source map generation check out the TypeScript and CoffeeScript blog posts.
$> coffee --js -i test.coffee
$> coffee --source-map -i test.coffee > test.js.map
The first line will compile your CoffeeScript to JS the second line will then generate the source map file.
$> uglifyjs2 test.js
Uglify has a few more options the most important being the
--in-source-map which will reference that source map when taking into account the file information and what it’ll output for the second stage source map.
$> tsc greeter.ts -sourcemap
The TypeScript compiler outputs greeter.js and greeter.js.map
$> uglifyjs2 greeter.js
This command is exactly the same as the CoffeeScript example but with the file names changed.
Source maps works in Chrome, Safari 6.1+, WebKit Nightly, Firefox 23+.