CoffeeScript Debugging with Sourcemaps in WebStorm 6


  • Sourcemaps allow you to navigate between minified JavaScript files and the original JavaScript files before they were minified.
  • Sourcemaps allow you to navigate between languages that compile to JavaScript (CoffeeScript, TypeScript, etc.) and the JavaScript files that are output in the compilation process.

WebStorm 6 and PhpStorm 6 can now leverage the information provided by sourcemaps and use it to debug JavaScript files. For example, you can place breakpoints in a CoffeeScript file and the debugger will pause at the breakpoint and display the relevant information from that line (variables in context, etc.).


To debug a CoffeeScript File:

1. Install CoffeeScriptRedux (Redux is still in beta, but it is *required* for generated sourcemaps for debugging. As it nears release, we’ll improve support and make this process much smoother with much less configuration)

2. Set up a CoffeeScript file watcher using Redux (this is a bit different from the default template which uses the non-Redux version of the CoffeeScript compiler, so follow this screenshot carefully):

3. Set up a CoffeeScript Sourcemap Compiler watcher:

Now, when you make changes in a CoffeeScript file, both watchers will be triggered and will generate target JavaScript file and source map file:

5. Add the “sourcemapping url” to your generated JS file (this process will improve as the CoffeeScript Redux project improves! We may add our own support, but for now it’s best to create a reusable live template snippet you can add quickly):

6. Start a debug session from your HTML file:

6. Add breakpoints to your CoffeeScript code:

Now you’ll be able to debug your CoffeeScript files as you would debug JavaScript!

Debugging other types of files that support sourcemaps (TypeScript, etc) is even easier: just set up the watcher, put breakpoints and start a debug session.


Develop with pleasure!
-JetBrains WebStorm Team


5 Responses to CoffeeScript Debugging with Sourcemaps in WebStorm 6

  1. Hi guys!

    As a temporary solution, we’ve come up with the tiny quirky solution (which is anyway better than adding //@ sourceMapping by hand every time you need to debug.

    Shortly, that’s adding another file watcher that appends // @sourceMapping. Quirk is it seems that file watchers are not always called sequentially. So, here’s a shell for file watcher:


    sleep 1s #a quirk here, should really be called after the .js and generation is finished
    echo “//@ sourceMappingURL=$” >> $FILENAME

    And we are passing 2 parameters to this command in the file watcher configuration dialog: $FileNameWithoutExtension$ $FileDir$

    Invoked this way, it woudl automaticall append a magic ‘debugger-friendly’ line to get the wheels rolling .

    On a side note, we had to download the freshest EAP to make things working for some reason.

    Thanks for the great job guys – IDEA is simply wonderful!


  2. I have generated a javascript source map for my minified application code. However when I hit run and it opens in Chrome, the map file cannot be found (it’s located next to the js file it maps. I try to fetch it in a new tab, and it gives me a 404 not found.

    I deployed the whole project to my production server and Chrome sees the mapping just fine. I notice when I edit the run configuration in Webstorm, however, that in the folder where the js and the map file are located, that the map file doesn’t appear, only the js.


    There is nothing in the documentation, nothing on the web, nothing, nothing, NOTHING!!!! What is going on???

  3. Tom Dibble says:

    This is great during debugging, but I still often find myself staring at a compiled .js file and wondering “where did this come from?” Is there any way to navigate from a line in a .js file directly to the original .ts file line? I expected to be able to right-click on the line number or line text and hit an option like “Show Original” (or, in the *ts file, perhaps “Show Compiled Javascript”).

    • Ekaterina Prigara says:

      If you have the generated source map files, you can right-click on it and select Visualise source map to see how the compiled file is mapped to the generated file.
      That’s not exactly what you want, but might be useful.
      In general, if source maps are configured, debugger is able to step through the original source code when the compiled code is executed in the browser.

Leave a Reply to Alex Cherednichenko Cancel reply
