CoffeeScript Source Maps

I've decided to do the projects I am working on in CoffeeScript, or variants thereof. The lack of a debugger is an annoyance, but can be dealt with, especially with Source Maps on the way.

Until official CoffeeScript support for Source Maps appears, there are two solutions possible. One is to use the compiler from Michael Ficarra's kickstarter. It generates source maps. The procedure is documented by Ryan Florence here, but I have changed the order and simplified things.

First, make sure everything but the compiler works.

Enable source mapping in Chrome as cribbed from the tutorial:

Open the console, click the gear at the bottom right, click the “Enable Source Maps” checkbox.

Download the demo files from Ryan Florence's site. It's a zip file. Unzip the files into a directory from which you can serve the files. Source mapping does not work for file system URLs right now.  I didn't have such a directory handy but I did have brunch installed on my machine so I created a brunch project, and then served the files from there.

$ npm install -g brunch$ brunch n brunchtest$ cd brunchtest$ brunch w -s

I copied the files in the the public directory of my project overwriting the default index.html. Brunch listens on port 3333, so I navigated chrome to http://localhost:3333

To be able to compile your own stuff, do this (again cribbed and modified)

Clone the compiler from github:

$ git clone git://github.com/michaelficarra/CoffeeScriptRedux.git <your directory>

Use npm to get the dependencies (this step is not in the tutorial)

$ cd <your directory>$ npm install

Use the downloaded test.coffee and index.html for your test and follow the procedure to compile and generate the source map

$ ./bin/coffee --js -i /path/to/test.coffee$  ./bin/coffee --source-map -i /path/to/test.coffee > /path/to/test.js.map

That should do it.