Debugging CoffeeScript using source maps

The problem in debugging CoffeeScript stems from the fact that CoffeeScript compiles into JavaScript which is what the browser executes. If an error arises, the line that has caused the error sometimes cannot be traced back to the CoffeeScript source file very easily. Also, the error message is sometimes confusing, making troubleshooting that much more difficult.

Recent developments in the web development community have helped improve the debugging experience for CoffeeScript by making use of a concept known as a source map. In this section, we will demonstrate how to generate and use source maps to help make our CoffeeScript debugging easier.

To use source maps, you need only a base installation of CoffeeScript.

You can generate a source map for your CoffeeScript code using the -m option on the CoffeeScript command:

coffee -m -c employee.coffee

Source maps provide information used by browsers such as Google Chrome that tell the browser how to map a line from the compiled JavaScript code back to its origin in the CoffeeScript file.

Source maps allow you to place breakpoints in your CoffeeScript file and analyze variables and execute functions in your CoffeeScript module. This creates a JavaScript file called employee.js and a source map called employee.js.map.

If you look at the last line of the generated employee.js file, you will see the reference to the source map:

//# sourceMappingURL=employee.js.map

Google Chrome uses this JavaScript comment to load the source map.

The following screenshot demonstrates an active breakpoint and console in Goggle Chrome: