Over a million developers have joined DZone.

CoffeeScript in a Chrome DevTools Workspace

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

 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!

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Chris Smith, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}