如何使用WebStorm IDE调试我的流星应用程序?

Can anyone provide a short list of steps on how to connect a Meteor app to the WebStorm debugger please?

有谁能提供一份关于如何将流星应用程序连接到WebStorm调试器的简短列表吗?

6 个解决方案

#1

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

WebStorm是唯一一个支持调试流星服务器代码的IDE——请查看本视频。即使在Windows上，调试也是非常简单的:

WebStorm 9+

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

运行——>调试——>编辑配置……，点击加号，点击“流星”。如果需要，可以添加环境变量ROOT_URL。

---

WebStorm older than 9

This answer is kept only for historical purposes. You should upgrade WebStorm.

这个答案只用于历史目的。你应该升级WebStorm。

On older WebStorms, you used to have to create a Node.js debugging configuration.

在以前的WebStorms，你以前必须创建一个节点。js调试配置。

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

  在服务器上，导出环境变量NODE_OPTIONS=——debug=47977。例如,

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

• create a WebStorm/PhpStorm Run/Debug configuration using the port above (47977) and the server host. Leave 127.0.0.1 if you're debugging locally.

  使用上面的端口(47977)和服务器主机创建WebStorm/PhpStorm运行/调试配置。如果在本地调试，请保留127.0.0.1。

• in WebStorm, Run -> Debug <myapp>, or press Shift+F9. Make sure that you see "Connected to <your host> in the Debug panel
• 在WebStorm中，运行-> Debug < mybbapp b1，或者按Shift+F9。确保在调试面板中看到“连接到您的主机>”。

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

现在你可以设置断点，访问本地变量等等。

For client debugging, just use the Chrome debugger, or Firebug.

对于客户端调试，只需使用Chrome调试器或Firebug即可。

Troubleshooting

• Process disconnected unexpectedly - this happens when meteor restarts automatically because of lack of specific support for Meteor. Just Run -> Debug <myapp>, or press Shift+F9 again.

  进程意外断开-当流星由于缺乏对流星的特殊支持而自动重新启动时发生。只需运行->调试 ，或再次按Shift+F9。

• you can't connect to the server - make sure the firewall rules allow incoming connections to whatever port you chose for the Node.js debugger (47977 here).

  您无法连接到服务器——请确保防火墙规则允许传入连接到您为该节点选择的任何端口。js调试器(47977)。

#2

The other answers are now out of date. Don't add a Node.js debug configuration as described above, or bother with spyjs.

其他的答案已经过时了。不要添加一个节点。如上所述的js调试配置，或者使用spyjs。

If you're using Webstorm 9.0, it's as simple as going to Run --> Debug --> Edit configurations... , click the plus, click "Meteor".

如果您正在使用Webstorm 9.0，那么只需运行——>调试——>编辑配置……，点击“+”，点击“流星”。

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

WebStorm可能会要求您安装一个浏览器插件，但这只是用于客户端调试;只要在服务器端代码中添加一个断点，您就可以看到它在这个框中工作了。

JetBrains have updated the video which was linked to in Dan Dascalescu's answer above, and it shows you the process I just described.

JetBrains已经更新了上面Dan Dascalescu答案中链接的视频，它向你展示了我刚才描述的过程。

#3

For applications using webpack:webpack, using WebStorm's Meteor debug profile did not seem to work.

对于使用webpack:webpack的应用程序来说，使用WebStorm的流星调试配置文件似乎不起作用。

My setup uses webpack:webpack v1.0.12, Meteor v1.3.0 and WebStorm 2016.1, but is likely to work with later versions (note that a fix for just this issue was released in v1.0.12, so earlier versions are likely not to work with this procedure).

我的设置使用webpack:webpack v1.0.12、meteoralv1.3.0和WebStorm 2016.1，但是很可能会使用较晚的版本(请注意，针对这个问题的修正是在v1.0.12中发布的，所以早期的版本可能不会使用这个过程)。

Here is what I did in order to get it working:

下面是我做的工作:

1. Create a webpack.json file at the project root.

   创建一个webpack。项目根目录中的json文件。

   It should include the devtool config, which generates source maps that assist in debugging. The rest may be changed according to your specific setup.

   它应该包括devtool配置，它生成有助于调试的源映射。其余的可以根据您的特定设置进行更改。

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

2. Create a debug setup:

   创建一个调试设置:

   Node.js Remote Debug, port 5858 (the port is configurable).

   节点。js远程调试，端口5858(端口是可配置的)。

   

3. Run meteor debug

   运行流星调试

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

   您可以指定一个端口，使用-调试端口 <端口号> 。

   See meteor help debug for the full details.

   请参阅流星帮助调试的详细信息。

   

4. Connect WebStorm to the debugger

   连接WebStorm到调试器

   • start the debugger
   • 启动调试器
   • the status message should indicate that it is connected. Scripts should available in the Scripts tab.
   • 状态消息应该表明它已连接。脚本应该在Scripts中可用。
   • the server should be running in the console
   • 服务器应该在控制台中运行

5. Hit your breakpoints and rejoice.

   点击你的断点，然后欢呼。

#4

WebStorm 9 will have Meteor support. While WS 9 isn't released yet (as of Oct 7, 2014), there is an early access program for WS 9.

WebStorm 9将有流星支持。虽然WS 9还没有发布(截至2014年10月7日)，但有一个WS 9的早期访问程序。

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

请阅读JetBrains的网络风暴博客，其中描述了一些支持流星的特性，并包括一个简短的视频。

I'm new to Meteor, WebStorm (and JavaScript for that matter) and have been using the WS 9 EAP build 138.2406 for a couple of weeks. I can launch my project from within the IDE, set breakpoints, walk though code, inspect values, jump to definitions, and issue completions. It's quite helpful.

我是流星，WebStorm(和JavaScript的JavaScript)，并且已经使用WS 9 EAP构建138.2406的几个星期。我可以在IDE中启动我的项目，设置断点，遍历代码，检查值，跳转到定义，并发出补全。这很有帮助。

#5

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

您可以为Webstorm尝试spyjs插件:http://blog.jetbrains.com/webstorm/2014/04/spy-js-webstorm-secret-service/

#6

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

有一个错误与旧版本的Webstorm调试服务器端1.0 .x。2015年12月24日发布的最新版Webstorm(11.0.3)对此进行了修正。发布说明可以在这里找到:https://confluence.jetbrains.com/display/WI/WebStorm+143.1559.5+Release+ notes

I am now able to debug without any problem from Webstorm :)

现在我可以在没有任何问题的情况下调试Webstorm:)