Michael Ficarra’s successful kickstarter project to create a ‘better CoffeeScript compiler’ now allows us to generate source maps for our CoffeeScript. Google Chrome already supports source maps, which means you can now debug CoffeeScript right in the browser.
Here is some very simple CoffeeScript that I’m going to try and debug.
I’m going to use the CoffeeScript compiler that is packaged through npm to compile the example. Version 1.6 (or later) has native support for source maps.
To compile with source maps, you simply need to pass the -m flag.
The last step is to enable source maps in Google Chrome. Open up the developer tools and look for the settings icon in the bottom right.
Now if you look in sources you should see your CoffeeScript file and be able to add break points, hover to view variables, etc.
The problem of debugging CoffeeScript, the most popular and strongest argument for not using it in the browser, has been solved! We still can’t type CoffeeScript into the console, but that day can’t be far off. Happy coding.