CoffeeScript Source Maps

By Ryan Florence, published 2012-09-07

Michael Ficarra’s successful kickstarter to create a “better CoffeeScript compiler” is already paying some huge dividends to the backers with source maps. Debugging CoffeeScript, the most popular and strongest argument for not using it in the browser, is now 90% solved.

Try it out yourself, what you’ll need:

Installing CoffeeScriptRedux

Clone it from github:

$ git clone git://github.com/michaelficarra/CoffeeScriptRedux.git

Install the dependencies:

$ cd CoffeeScriptRedux
$ make deps

Run the tests to make sure its all happy:

$ make test

Compile your file to JS

CoffeeScriptRedux doesn’t use the same interface as the original coffeescript, so this is a bit different than what you’re probably used to.

From the CoffeeScriptRedux directory:

$ ./bin/coffee --js -i /path/to/test.coffee

That’ll create /path/to/test.js.

Create the Source Map File

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

I had to install the source-map npm module for it to work.

$ npm install source-map

Tell the Browser About the Source Map

You need to tell the browser where your source map is by adding a comment to the file, you can open test.js up in an editor or just run this:

$ (echo; echo '//@ sourceMappingURL=test.js.map') >> /path/to/test.js

Fire up Chrome and Enable Source Maps

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

chrome

That’s it!

When you go to “Sources” in web inspector for a web page that includes test.js it will now show your CoffeeScript source files where you can set break points, hover variables to see their values, etc.

Here’s me debugging a purposefully broken map implementation:

Download the demo files

map

So What is the 10% Not Solved?

Well, you can’t type CoffeeScript into the console. There is the CoffeeConsole chrome plugin, but that doesn’t know anything about being paused in a break point, etc.

Hi, I'm Ryan!

Location:
South Jordan, UT
Github:
rpflorence
Twitter:
ryanflorence
Freenode:
rpflo

About Me

I'm a front-end web developer from Salt Lake City, Utah and have been creating websites since the early 90's. I like making awesome user experiences and leaving behind maintainable code. I'm active in the JavaScript community writing plugins, contributing to popular JavaScript libraries, speaking at conferences & meet-ups, and writing about it on the web. I work as the JavaScript guy at Instructure.