Coffeescript debugging using source maps Follow
I'm having trouble debugging server side coffeescript in latest WebStorm 6 EAP.
My folder structure is as follows:
src\ - coffee files
.build\ - transpiled js and source map files (no coffee files)
How should I reference coffee sources in source maps? I tried absolute and relative to the project root paths - still not working.
Or is there a requirement to have all the files in the same folder?
Please sign in to leave a comment.
Hi Sergey,
the path to sources should be relative to the generated .js file location. For example: "file":"myScript.js","sources":["scripts/myScript.coffee"];
note that the .js file should contain //@ sourceMappingURL pointing to the map file (unless the file is located in the same forder and is called %outname%.map, where %outname% is the js file name with extension)
Note also that using '../' in path to sources doesn't seem to work - see http://youtrack.jetbrains.com/issue/WEB-6460
Best regards,
Lena
Lena, thank you for your answer! WEB-6460 bug seems to be the reason why I'm not getting my source maps working.
Sergey, would you be able to share with us how you went about getting set up for CoffeeScript debugging with WebStorm 6?
I have not been able to get source map generation to work via file watchers (this is even after adding the --map argument to the configuration), however I did manage to get source maps generated (only for some files, which is really weird) by adding a "Generate CoffeeScript Source Maps" step to the "Before launch" run/debug configuration.
In any event, I am unable to debug the project, let alone hit a breakpoint via a source map, so I was wondering if you could share your steps in getting closer to having this working.
Thanks in advance!
Please make sure you have CoffeeScript 1.6.1
Check this screencast to find out how to modify the standard CoffeeScript file watcher to generate source maps.
http://www.youtube.com/watch?v=Sl1Uk3zT5Fg
Thanks for that! I now have the file watcher properly configured to compile CoffeeScript to JS and also generate the source maps.

The video shows how to debug an HTML file, and that seems to work fine. But what about Node.js directly?
Here's what I've got for my Run/Debug configuration.
Unfortunately, this does not appear to work, as I do not see the option to Debug, only Run. Is there anything wrong in my configuration?
I generate source maps using my own grunt task (via coffee-script 1.6.1 or coffee-script-redux), not using file watchers. I didn't find them useful as there's no command to compile all coffee files at once.
You are able to configure a custom file watcher which runs your grunt task on changes of *.coffee files.
Thanks for your help guys. Generating .map files is now completely clear, but how exactly would I go about the actual debugging?
I thought I'd post a few more details so you guys get a better idea of exactly what I've got.
euskode:src mcc$ pwd
/Users/euskode/src/myProj/web/adl/src
euskode:src mcc$ ls -R
controller.coffee prep.coffee util
maintenance.coffee server.coffee
./util:
myProjstream.coffee configmanager.coffee
euskode:src mcc$ coffee -c --map .
euskode:src mcc$ ls -R
controller.coffee maintenance.map server.js
controller.js prep.coffee server.map
controller.map prep.js util
maintenance.coffee prep.map
maintenance.js server.coffee
./util:
myProjstream.coffee myProjstream.map configmanager.js
myProjstream.js configmanager.coffee configmanager.map
So at this point, I've got the whole thing compiled and the source maps generated. This is what it looks like in WebStorm (for some reason, it doesn't appear to group the .js and .map files under each .coffee, though this does work when the IDE is in charge):
My question is, how would I go about debugging this so I can set breakpoints in the CoffeeScript source files?
I realize that Node.js does not support this directly, so I have started using node-source-map-support for stack traces. However, what I am really after is being able to hit a breakpoint in WebStorm for my CoffeeScriipt Node.js server-side code base. I do think this is possible, isn't it?
Thanks in advance!
Do you start your application using "Debug" command (Shift + F9)? Do generated map files seem valid? Cause I don't see any problem with your project.
node-source-map-support just for the stack traces, doesn't do anything for breakpoints.
Please use file watcher to group your files. Check this blog post http://blog.jetbrains.com/webide/2013/03/file-watchers-in-webstormphpstorm-6-a-k-a-background-tasks/
Also here is a screencast about coffeescript debugging http://www.youtube.com/watch?v=Sl1Uk3zT5Fg
NodeJS debug should works with sourcemap backed scripts. If it doesn't work, please create issue and attach test project.
This topic is not about NodeJS, so, http://youtrack.jetbrains.com/issue/WEB-6460 is not relevant.
Thanks for all your help guys!
Here's a sample project I have just created to replicate this:
Could you take a look to see if there is something really basic that I am doing wrong here? If you can't figure it out, I will definitely go ahead and open a bug.
Basically, I set a breakpoint on line 6 of test.coffee and debug the project, but the breakpoint does not get hit and the output is as expected:
/Users/euskode/nvm/v0.10.0/bin/node --debug-brk=58836 test.js
debugger listening on port 58836
euskode at 41087 says 25cae20254db31da74d2f8b4770b46c56f3153452db9c849a272ead6c0d31a7b
Process finished with exit code 0
You will have to adjust the path to your node binary for this to work. I have tried this with both Node.js 0.8.17 as well as the recently-released 0.10.0
Hopefully this is something really small and I can finally hit a breakpoint in Node.js CoffeeScript!
Have any of you guys had a chance to look into this? :)
Sadly, I have nothing new to report myself and have not been able to make any progress...
I'm sorry, we'll get back to you on Monday.
Kirill
We are still investigating this. Please see comments here http://youtrack.jetbrains.com/issue/WEB-7091#comment=27-459155
Vladimir, thanks for pointing me there. I will continue all discussion of this issue on YouTRACK.
I finally figured out how to debug coffeescript on Node.js with IntelliJ IDEA 12.1
The key info I was missing is that you should start the debugger on the generated .js file. The debugger will then automatically stop at breakpoints set on your .coffee file.
Since the documentation and comments on the subject are not all up to date, here is a recap of what you should check in case you're having difficulties:
For the record, you can also run your Node.js .coffee scripts directly from IntelliJ IDEA with the "Run" command, but that has nothing to do with debugging them. You can also debug coffeescript when the corresponding .js is loaded from an HTML page in Chrome by launching the debugger on the HTML file, but that's also irrelevant here.
Bye bye console.dir :-)
Vianney
(Cross-posted on http://youtrack.jetbrains.com/issue/WEB-7091#comment=27-459155)
I can also confirm that this is all 100% working on WebStorm 6.0.2, build WS-129-221. Thanks for all the hard work!