Coffeescript debugging using source maps Follow

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

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:

• Set a File Watcher with CoffeeScript version 1.6.2 (non-redux) to  automatically generate .js and .map files. CoffeeScript redux might also  work, but I haven't managed to use it (and you no longer need to).
  
• Check that the two .js and .map files appear as children of your  .coffee script file item in the files tree of the Project panel.
  
• Check that pure javascript local node debugging works.
  
• Check the .js file has the correct sourceMappingURL snippet automatically appended with the double comment syntax:

/*
//@ sourceMappingURL=test_debug.map
*/

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!