javascript 如何使用节点检查器，Windows 7 调试带有断点的 Gruntfile？

How to debug a Gruntfile with breakpoints using node-inspector, Windows 7?

提问by Kris Hollenbeck

So I have spent the past couple days trying to get this to work with no luck. Most of the solutions I have found seem to work "okay" for debugging node applications. But I haven't had much luck debugging grunt stand alone. I would like to be able to set breakpoints in my gruntfile and either step through the code with either the browser or an IDE.

所以我在过去的几天里一直试图让它在没有运气的情况下工作。我发现的大多数解决方案对于调试节点应用程序似乎“正常”。但是我没有多少运气单独调试 grunt 。我希望能够在我的 gruntfile 中设置断点，并使用浏览器或 IDE 单步执行代码。

I have tried the following:

我尝试了以下方法：

• Debugging using intelliJ IDE Using Grunt Console(Process finished with exit code 6)
• Debugging with Nodeeclipse(This sort of works okay but doesn't hit the breakpoints set in eclipse, not very intuitive)
• Debugging using node-inspector(This one also sort of works. I can step through a little ways using F11 and F10 in chrome. But eventually it just crashes. Using F8 to skip to break point never works.)

• 使用 Grunt 控制台使用 IntelliJ IDE 进行调试（过程已完成，退出代码为 6）
• 使用 Nodeeclipse 调试（这种工作正常，但没有达到 eclipse 中设置的断点，不是很直观）
• 使用 node-inspector 进行调试（这也是一种工作。我可以在 chrome 中使用 F11 和 F10 逐步完成一些方法。但最终它只是崩溃了。使用 F8 跳到断点永远行不通。）

ERROR MESSAGE USING NODE-INSPECTOR

使用节点检查器的错误消息

So currently node-inspector feels like it has gotten me the closest to what I want. To get here I did the following:

所以目前 node-inspector 感觉它已经让我最接近我想要的。为了到达这里，我做了以下事情：

From my grunt directory I ran the following commands:

从我的 grunt 目录中，我运行了以下命令：

grunt node-inspector
node --debug-brk Gruntfile.js

And then from there I went to localhost:8080/debug?port=5858to debug my Gruntfile.js. But like I mentioned above, as soon as I hit F8 to skip to breakpoint it crashes with the above error. Has anybody had any success using this method to try to debug a Gruntfile? So far from my search efforts I have not found a very well documented way of doing this. So hopefully this will be useful or beneficial information for future users. Also I am using Windows 7by the way. Thanks in advance.

然后从那里我去localhost:8080/debug?port=5858调试我的 Gruntfile.js。但是就像我上面提到的那样，一旦我按 F8 跳到断点，它就会因上述错误而崩溃。有没有人使用这种方法尝试调试 Gruntfile 取得成功？到目前为止，从我的搜索工作中，我还没有找到一种很好的文档记录方式来做到这一点。所以希望这对未来的用户有用或有益的信息。顺便说一下，我也在使用Windows 7。提前致谢。

UPDATE:

更新：

I have tried the following suggested by @dylants with no luck so far.

到目前为止，我已经尝试了@dylants 建议的以下内容，但没有成功。

1. Found the grunt.cmd file on windows machine located in C:\Users\khollenbeck\AppData\Roaming\npm. Opened up grunt.cmdfile and found the following....

   

2. This lead me to C:\Users\khollenbeck\AppData\Roaming\npm\node_modules\grunt-cli\binwhich contained a file called grunt. And from there at the top of the file. I changed this code #!/usr/bin/env nodeto #!/usr/bin/env node --debug-brk

3. After doing this command node-inspector C:\path\to\gruntfile gruntI got the following.

   Node Inspector v0.7.3 Visit http://localhost:8080/debug?port=5858 to start debugging

4. Next I ran the gruntcommand from grunt dir. (leaving the server running in original command prompt)

1. 在 Windows 机器上找到 grunt.cmd 文件位于C:\Users\khollenbeck\AppData\Roaming\npm. 打开grunt.cmd文件，发现以下内容......

   

2. 这将我引向C:\Users\khollenbeck\AppData\Roaming\npm\node_modules\grunt-cli\bin其中包含一个名为grunt. 然后从文件顶部开始。我将此代码更改#!/usr/bin/env node为#!/usr/bin/env node --debug-brk

3. 执行此命令后，node-inspector C:\path\to\gruntfile grunt我得到以下信息。

   Node Inspector v0.7.3 Visit http://localhost:8080/debug?port=5858 to start debugging

4. 接下来我grunt从 grunt 目录运行命令。（让服务器在原始命令提示符下运行）

From here I expected Gruntfile.js to show up in the source of chrome dev tools. I also expected to be able to set breakpoints from there. This did not happen. Instead it just ran all the way through the Gruntfile without breaking or loading in the browser.

从这里开始，我希望 Gruntfile.js 出现在 chrome 开发工具的源代码中。我还希望能够从那里设置断点。这没有发生。相反，它只是一直运行在 Gruntfile 中，而不会破坏或加载到浏览器中。

Edit:

编辑：

Ah, I see what I did wrong. For some reason I did node --debug-brk with out adding the path C:\Users\khollenbeck\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt. Its working now, thanks so much. I apologize for dragging this on for so long. But hopefully this will be useful for other windows users in the future.

啊，我明白我做错了什么。出于某种原因，我做了 node --debug-brk 没有添加路径 C:\Users\khollenbeck\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt。它现在工作，非常感谢。我为拖延这么久而道歉。但希望这对将来的其他 Windows 用户有用。

回答by dylants

This can be accomplished by starting up node-inspectorand starting gruntin debug mode. Once that's done, you can step through your Gruntfile.jswithin Chrome as you normally would.

这可以通过在调试模式下启动node-inspector和启动来完成grunt。完成后，您可以Gruntfile.js像往常一样在 Chrome 中浏览。

start node-inspector

启动节点检查器

If you don't already have node-inspector, install it using npm install -g node-inspector. Then start it up in one terminal/command prompt:

如果您还没有node-inspector，请使用 安装它npm install -g node-inspector。然后在一个终端/命令提示符下启动它：

$ node-inspector
Node Inspector v0.7.3
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.

run grunt in debug mode

在调试模式下运行 grunt

Next, locate your gruntscript. This is the JavaScript file that is executed when you run the gruntcommand from the command line. If you installed grunt globally (using npm install -g grunt-cli) then it will most likely be in /usr/binor /usr/local/binfor *nix or Mac machines. For Windows machines, the grunt.cmdfile points to where the gruntscript is located. Most likely the gruntscript is located in C:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin.

接下来，找到您的grunt脚本。这是从命令行运行grunt命令时执行的 JavaScript 文件。如果您全局安装了 grunt（使用npm install -g grunt-cli），那么它很可能在*nix 或 Mac 机器中/usr/bin或/usr/local/bin用于 *nix 或 Mac 机器。对于 Windows 机器，该grunt.cmd文件指向grunt脚本所在的位置。grunt脚本很可能位于C:\Users\<username>\AppData\Roaming\npm\node_modules\grunt-cli\bin.

Once you've found the location of the script, use node --debug-brkto execute this script, thus starting grunt in debug mode breaking on the first line of code in the file. So for instance, imagine the grunt script is located at /usr/bin/grunt:

找到脚本的位置后，使用node --debug-brk来执行此脚本，从而在调试模式下启动 grunt 中断文件中的第一行代码。例如，假设 grunt 脚本位于/usr/bin/grunt：

$ node --debug-brk /usr/bin/grunt 
debugger listening on port 5858

You'll know you're successful when you see debugger listening on port 5858as the output, which means that the grunt script has halted execution and is waiting to be stepped through with the debugger.

当您看到debugger listening on port 5858输出时，您就会知道您成功了，这意味着 grunt 脚本已停止执行并等待调试器单步执行。

debug with Chrome

用 Chrome 调试

Now bring up Chrome and point it to http://127.0.0.1:8080/debug?port=5858. Within Chrome, open and add break points in your Gruntfile.js, and step through as you normally would.

现在调出 Chrome 并将其指向http://127.0.0.1:8080/debug?port=5858. 在 Chrome 中，打开并在您的 中添加断点Gruntfile.js，然后像往常一样逐步执行。

回答by dtothefp

To start the node-inspector you should no longer pass the --debug or --debug-brk flag. You can start it directly using node-inspectorand a filepath, just like you would normally starting execute a script using the nodecommand. This should automatically open the webkit inspector in chrome, and pause at the first line of execution. You can from here insert your breakpoints and debug as normal.

要启动节点检查器，您不应再传递 --debug 或 --debug-brk 标志。您可以直接使用node-inspector和文件路径启动它，就像您通常使用node命令开始执行脚本一样。这应该会自动在 chrome 中打开 webkit 检查器，并在第一行执行时暂停。您可以从这里插入断点并照常调试。

As mentioned above, to debug a grunt task you would have to find your Grunt executable using $ which gruntin Mac, not sure about Windows. Then you would have to copy that path, and use it as the first argument passed to node-debug, with the second argument being the task (and you could also include the grunt target if necessary). So for example it may look like:

如上所述，要调试 grunt 任务，您必须$ which grunt在 Mac 中找到 Grunt 可执行文件，而不确定 Windows。然后，您必须复制该路径，并将其用作传递给 node-debug 的第一个参数，第二个参数是任务（如果需要，您还可以包含 grunt 目标）。例如，它可能看起来像：

node-debug /usr/local/bin/grunt concat:dev

node-debug /usr/local/bin/grunt concat:dev

and from here you could debug any file that will be executed for the concat task. This includes dependencies of grunt-concat that would be in it's local node_modules. Because I found it annoying to copy and paste my executable path I made the most simple Node cli to abstract this away https://github.com/dtothefp/node-build-debug. If you install this globally (and of course have node-inspector installed globally) you can:

从这里您可以调试将为 concat 任务执行的任何文件。这包括在本地 node_modules 中的 grunt-concat 的依赖项。因为我发现复制和粘贴我的可执行路径很烦人，所以我制作了最简单的 Node cli 来抽象它https://github.com/dtothefp/node-build-debug。如果您全局安装它（当然还有全局安装的节点检查器），您可以：

$ build-debug grunt concat:dev

$ build-debug grunt concat:dev

回答by Dmytro Shevchenko

In the newer Node versions (starting from 6.3 I think), there's an in-built debugger/inspector:

在较新的 Node 版本中（我认为从 6.3 开始），有一个内置的调试器/检查器：

https://nodejs.org/en/docs/inspector/

https://nodejs.org/en/docs/inspector/

Just start your Grunt app like this (on Windows):

像这样启动你的 Grunt 应用程序（在 Windows 上）：

node --inspect %APPDATA%\npm\node_modules\grunt-cli\bin\grunt

If you install the Chrome extension Node Inspector Manager, the DevTools will open automatically.

如果您安装 Chrome 扩展Node Inspector Manager，DevTools 将自动打开。

Otherwise, you can open chrome://inspectand connect to the debugging session manually.

否则，您可以chrome://inspect手动打开并连接到调试会话。