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:
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.
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:
Use the downloaded test.coffee and index.html for your test and follow the procedure to compile and generate the source map
That should do it.
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.
$ 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/testcoffee
$ /bin/coffee --source-map -i /path/to/testcoffee > /path/to/testjsmap
That should do it.
Comments
Post a Comment