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

Question

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.

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.)

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:

From my grunt directory I ran the following commands:

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

And then from there I went to localhost:8080/debug?port=5858 to 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 7 by the way. Thanks in advance.

UPDATE:

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

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

   

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

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

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

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

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.

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.

Answer 1

This can be accomplished by starting up node-inspector and starting grunt in debug mode. Once that's done, you can step through your Gruntfile.js within Chrome as you normally would.

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
Node Inspector v0.7.3
Visit http://127.0.0.1:8080/debug?port=5858 to start debugging.

run grunt in debug mode

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

Once you've found the location of the script, use node --debug-brk to 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 /usr/bin/grunt 
debugger listening on port 5858

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

debug with 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.

Answer 2

To start the node-inspector you should no longer pass the --debug or --debug-brk flag. You can start it directly using node-inspector and a filepath, just like you would normally starting execute a script using the node command. 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.

As mentioned above, to debug a grunt task you would have to find your Grunt executable using $ which grunt in 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:

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:

$ build-debug grunt concat:dev

Answer 3

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

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

Just start your Grunt app like this (on 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.

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