Jun 13, 2013

CoffeeScript in a Chrome DevTools Workspace

In case you didn't hear, Chrome DevTools Workspaces let you edit local CoffeeScript source files directly from your browser. For a thorough overview of the feature, watch Addy Osmani's video tour. Paul Irish showed it off as well a couple weeks ago in his fabulous FluentConf talk, "JavaScript Development Workflow of 2013". At this time, you need Chrome Canary to use Workspaces.

While Workspaces is handy for any front-end project, a truly CoffeeScript-friendly dev environment also includes Source Maps for debugging. Today I came across github.com/latentflip/browserify-grunt-workspaces-demo, a handy Grunt-based demo project by Philip Roberts that uses Browserify to build the necessary Source Maps metadata.

When you successfully run the default Grunt task in Philip's project, you should see some very important output, shown below. This is configuration that is essential for Source Maps to work correctly with your local CoffeeScript files.




Copy and paste the values from the build output into the Chrome DevTools Workspaces pane.


If you get things working correctly, you should be able to edit a local CoffeeScript file from within DevTools. For some Source Maps action, add an error as shown, then refresh the page and navigate back to the CoffeeScript source of the error.

Very cool stuff! If you have any trouble, ping me @quartzmo, and I'll see if I can help!