Over a million developers have joined DZone.

CoffeeScript in a Chrome DevTools Workspace

DZone's Guide to

CoffeeScript in a Chrome DevTools Workspace

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

 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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


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

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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


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

{{ parent.tldr }}

{{ parent.urlSource.name }}