How can I debug CoffeeScript in my Meteor app usin

问题:

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?

回答1:

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:

1. Run meteor with the node debugger options:

   $ NODE_OPTIONS="--debug=47977" meteor

2. Setup a node.js remote debug configuration in Webstorm, pointing it at the same port (47977).

3. Launch a debug session

4. 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!

回答2:

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! :)

回答3:

@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>