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.
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.
$> 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 -o test.min.js --source-map test.min.js.map --in-source-map test.js.map -m -c
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 -o greeter.min.js --source-map greeter.min.js.map --in-source-map greeter.js.map -m -c
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+.