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.
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 only work in Chrome and WebKit nightly but is coming very soon to Firefox Nightly.
Short URL: http://cssn.in/ja/045