How can I debug CoffeeScript in my Meteor app using the WebStorm IDE

Question

I'm able to get Meteor debugging in WebStorm using JavaScript using the instructions in this question (How can I debug my Meteor app using the WebStorm IDE?).

However, I cannot seem to set breakpoints in coffeescript files.

Is it possible to do this?

score 3 · Accepted Answer · answered Jul 27 '14 at 03:10

I fiddled with this for a while without any great success. From what I could gather, for WebStorm to support coffeescript breakpoints it needs to generate the transpiled js and map files itself... which will break meteor, as it does its own coffeescript compilation.

In the end, the closest I got was to:

Run meteor with the node debugger options:

$ NODE_OPTIONS="--debug=47977" meteor
Setup a node.js remote debug configuration in Webstorm, pointing it at the same port (47977).
Launch a debug session
Set my breakpoints in the transpiled js files shown in the debugger's "scripts" tab. Confusingly, when setting breakpoints on these files, my version of WebStorm (8.0.4) did not show the usual red circle icon in the gutter... but it did set the breakpoint and break there.

So not ideal, but still better than nothing and more convenient than using node-inspector!

@jonathanmofatt I tried it, but Meteor still breaks due to JS files made by Webstorm — Sameer Shemna, Oct 07 '15 at 21:36

score 0 · Answer 2 · answered Oct 08 '15 at 08:39

0

I finally figured it out.

You have add a folder (in my example '.coffeejs') to store the transpiled js and map files, name it as you may but remember to start the folder name with '.' for Meteor's bundler to ignore files in it.

Then edit the watcherTasks.xml file, which you will find in the .idea folder of the project's root, and change the 'arguments' value to the following:

--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$

Enjoy Meteor with Coffee! :)

answered Oct 08 '15 at 08:39

Sameer Shemna

886
10
19

you shouldn't use file watchers with meteor. Just use 'coffee' meteor package and enjoy. – anstarovoyt Oct 08 '15 at 09:29
@anstarovoyt, webstorm doesn't break on coffee breakpoints without this voodoo. unfortunately – avalanche1 Feb 12 '16 at 13:16

score 0 · Answer 3 · answered Oct 24 '16 at 13:52

@Sameer Shemma

For your trick to work does one need:

to only add this new folder .coffeejs and change the single line that you highlighted in the watcherTasks.xml file or
to replace my entire watcherTasks.xml file by yours?

I tried to first possibility and WebStorm would still not stop at most breakpoints put in the .coffee files.

For the second I did not know what would be the correspondence of the "/usr/local/bin/coffee" path value of the name attribute in my case (Windows 7, Meteor 1.4.1.2, CoffeeScript package 1.11.1_1, WebStorm 2016.2.3), but without changing that, WebStorm still does not stop at most breakpoints put the the .coffee files.

Also, does your trick do require to install a CoffeeScript file watchers and/or stand-alone compiler outside of the one presumably included in the Meteor CoffeeScript atomosphere package 1.11.1_1 that I am using?

Here is my current watcherTasks.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectTasksOptions">
    <TaskOptions isEnabled="true">
      <option name="arguments" value="--output $ProjectFileDir$/.coffeejs/ --map --compile $FileName$" />
      <option name="checkSyntaxErrors" value="true" />
      <option name="description" value="Compiles .coffee files into .js files" />
      <option name="exitCodeBehavior" value="ERROR" />
      <option name="fileExtension" value="coffee" />
      <option name="immediateSync" value="true" />
      <option name="name" value="CoffeeScript" />
      <option name="output" value="$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map" />
      <option name="outputFilters">
        <array />
      </option>
      <option name="outputFromStdout" value="false" />
      <option name="program" value="$ExecutableByFileExt$" />
      <option name="scopeName" value="Project Files" />
      <option name="trackOnlyRoot" value="true" />
      <option name="workingDir" value="$FileDir$" />
      <envs />
    </TaskOptions>
  </component>
</project>

How can I debug CoffeeScript in my Meteor app using the WebStorm IDE

3 Answers3

Linked