使用WebStorm通过来自单独客户端应用程序的调用进行Node Express App调试

Question

我环顾四周，很难搞清楚这一点。我希望有人可以指点我的帖子，或者有关于如何做到这一点的信息。

我的问题是我有两个使用WebStorm制作的项目：

• 我有一个应用程序，它是在端口3000上运行的服务器端代码。它是一个简单的Node Express应用程序。
• 第二个应用程序是在端口8100上运行客户端的Angular 4 / Ionic 3应用程序。

我想在调试模式下运行我的服务器应用程序，以便它从客户端应用程序发送的所有数据都会遇到断点。

例如：Angular / Ionic应用程序为给定客户的所有客户端发送get请求。客户通过url参数发送。我希望服务器代码在收到此请求时暂停，因此我可以看到此URL参数。相当简单。

服务器也使用grunt构建项目，而nodemon则使用它来观察它。我正在使用一些npm脚本来简化生活。以下是脚本：

"scripts": {
  "dev": "SET NODE_ENV=development && nodemon ./bin/www",
  "grunt": "grunt",
  "start": "node ./bin/www"
},

没什么特别的。

我已将WebStorm配置为从命中游戏运行我的脚本。因此播放按钮将首先按以下顺序运行：

1. npm run grunt
2. npm run dev

再一次......没什么特别的。

现在我如何设置调试器以便我可以在WebStorm中监听？我在两个单独的窗口中打开了两个项目，我正在从客户端启动对服务器的调用。如何抓住断点并向我显示进入服务器的数据？

我觉得这非常容易，而且我错过了一些非常愚蠢的东西。任何帮助将不胜感激。

Answer 1

您需要在调试器中启动服务器以获取服务器代码中的断点。如果您希望通过npm脚本启动应用程序，则必须在Windows上添加$NODE_DEBUG_OPTION（或%NODE_DEBUG_OPTION%）以确保使用适当的调试选项--debug-brk启动Node.js， --inspect-brk等）

所以：

在package.json中
• ，修改您的dev脚本，如下所示：

"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"

• 右键单击package.json，选择显示npm脚本
• 右键点击打开的 npm 工具窗口中的dev脚本，选择编辑'dev'设置以创建运行配置。
• 在编辑器中打开源文件，添加断点
• 按调试开始调试
• 运行您的客户端应用，启动对服务器的调用