Apr 3, 2012

Source Maps for CoffeeScript

One of the more serious concerns about CoffeeScript is that it lacks a first-class debugging environment. The code that you see in a browser debugger is the compiled JavaScript, not the CoffeeScript source. Thanks to JavaScript Source Maps, however, this long-running issue will likely be solved in the very near future.

JavaScript Source Maps is a system of references from JavaScript executing in the browser to original source files that have been minified, concatenated, compiled, or otherwise transformed. Chrome dev tools evangelist Paul Irish called Source Maps "the biggest thing to happen to JavaScript debugging in years." The Google Chrome team is pushing aggressively toward the release of Source Maps support (you can preview the feature in Chrome Canary).

Finally, Mozilla intern Nick Fitzgerald has produced a great what-I-did-this-summer video explaining the importance of Source Maps and of languages such as CoffeeScript. I recommend watching all 15 minutes of it, but for the TL;DR crowd, start around minute 11 for the sequence in which he demos an actual JavaScript console error with a link back to CoffeeScript source. Woo Hoo!

"Source maps in Firefox and Chrome will be one of the most important pieces of software infrastructure since Javascript itself. It will be the realization of Stallman's 'one script to unite them all' vision for GNU GUILE from the 'Tcl wars.' A pity that it isn't Lisp, but there is enough goodness in Javascript (and Coffeescript) to make me very optimistic."

Hyperbole? We'll see.

Update (2013/3/5)

Almost a year after my original post, CoffeeScript 1.6.1 now supports Source Maps via the --map compiler option!