Debugging CoffeeScript using source maps
If you have spent any time in the JavaScript community, you would have, no doubt, seen some discussions or rants regarding the weak debugging story for CoffeeScript. In fact, this is often a top argument some give for not using CoffeeScript at all. In this recipe, we will examine how to debug our CoffeeScript application using source maps.
Getting ready
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.
How to do it...
You can generate a source map for your CoffeeScript code using the -m option on the CoffeeScript command:
coffee -m -c employee.coffee
How it works...
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:
