How can I debug my Meteor application using WebStorm IDE?

Question

Can someone provide a short list of steps for connecting a Meteor application to the WebStorm debugger, please?

Answer 1

WebStorm is the only IDE with native Meteor server code debugging support - check out this video . Even on Windows, debugging is very simple:

WebStorm 9+

Go to Run -> Debug -> Edit configuration ..., click the plus sign, click "Meteor". You can add an environment variable such as ROOT_URL if you need to.

---

WebStorm over 9

This answer is retained for historical purposes only. You should update WebStorm.

In older WebStorms, you had to create a Node.js debug configuration.

• on the server, export the NODE_OPTIONS=--debug=47977 environment variable. For example,

   NODE_OPTIONS=--debug=47977 meteor # Linux/Mac set NODE_OPTIONS=--debug=47977 & meteor` # Windows 

• Create a WebStorm / PhpStorm launch / debug configuration using the port above (47977) and the server host. Leave 127.0.0.1 if you are debugging locally.

• in WebStorm, Run -> Debug <myapp>, or press Shift + F9. Make sure you see "Connected to <your host>" in the Debug panel

Now you can set breakpoints, access local variables, etc.

To debug the client, simply use the Chrome or Firebug debugger.

Troubleshooting

• Process disconnected unexpectedly - this happens when a meteorite starts automatically due to the lack of specific support for the Meteor. Just run -> Debug <myapp>, or press Shift + F9 again.

• you cannot connect to the server - make sure that the firewall rules allow incoming connections to any port that you selected for the Node.js debugger (47977 here).

Answer 2

Other answers are now outdated. Do not add Node.js debugging configuration as described above, or worry about spyjs.

If you use Webstorm 9.0, it is as simple as in Run → Debug → Edit configurations ..., click on the plus, click on the Meteor.

WebStorm may also ask you to install a browser add-on, but only for the client part of the debugging; just add a breakpoint to the server side code and you will see that it works out of the box.

JetBrains updated the video that was linked to in Dan Dascalescu above, and it shows you the process that I just described.

Answer 3

For applications using webpack:webpack , using the WebStorm Meteor debug profile does not seem to work.

My setup uses webpack:webpack v1.0.12, Meteor v1.3.0 and WebStorm 2016.1, but it will probably work with later versions (note that the fix for this problem only was released in version 1.0.12, so earlier versions probably not work with this procedure).

Here is what I did to make it work:

• Create a webpack.json file in the root of the project.

  It should include a devtool configuration that generates source maps that help debug. The rest can be changed according to your specific setting.

   { "root": "src", "devServer": { "host": "localhost" }, "devtool": "source-map" } 

• Create a debug setting:

  Node.js Remote debugging, port 5858 (port is configurable).

  

• Run meteor debug

  You can specify a port using --debug-port <port number> .

  See meteor help debug details.

  

• Connect WebStorm to the debugger

  • run the debugger
  • a status message should indicate that it is connected. Scripts should be available on the Scripts tab.
  • the server should work in the console

• Hit your breakpoints and rejoice.

Answer 4

WebStorm 9 will support Meteor. While WS 9 has not yet been released (as of October 7, 2014), there is an early access program for WS 9 .

Read the JetBrains WebStorm blog, which describes some of the Meteor support features and includes a short video.

I am new to Meteor, WebStorm (and JavaScript, for that matter), and have been using the WS 9 EAP 138.2406 build for several weeks. I can start my project from the IDE, set breakpoints, go through the code, check the values, go to the definitions and complete the release. It is very useful.

Answer 5

You can try the spyjs plugin for Webstorm: http://blog.jetbrains.com/webstorm/2014/04/spy-js-webstorm-secret-service/

Answer 6

There is a bug with older versions of Webstorm for debugging the server side of Meteor 1.2.x. The latest version of Webstorm (11.0.3), released on December 24, 2015, fixed it. Release notes can be found here: https://confluence.jetbrains.com/display/WI/WebStorm+143.1559.5+Release+Notes

Now I can debug without problems from Webstorm :)