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.

Sagittarius

In step 3, when you run node-inspector, simply run the command node-inspector without any parameters. In step 4, instead of running just grunt, try node --debug-brk C:\Users\khollenbeck\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt. If grunt started in debug mode you should see debugger listening on port 5858 for the output of that command. – Mcnulty

Okay that got me a lot closer... One more problem though. So now I have the debugger open with Gruntfile loaded. I run grunt from a third command window, it pauses the command line but does not hit the break point I set in chrome. – Sagittarius

You shouldn't need to start grunt from a third window, it's already running via the node --debug-brk ... command. Simply step through using Chrome, and if you need to re-run, execute the same node --debug-brk ... command again. I've updated my answer below to hopefully better explain. – Mcnulty

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. – Sagittarius

Woohoo! No problem, I'm just happy we finally got it working :) – Mcnulty

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.

Mcnulty

Not sure what you mean by grunt executable... What file would that be? Or what would the file name be? – Sagittarius

I just mean file that is called when you execute grunt on the command line. For me the file name is grunt, but it might be grunt.exe on Windows. I'm able to see where the file is by running $ which grunt – Mcnulty

I just run the command grunt from the same directory as my Gruntfile.js .. there is no grunt.exe that I am aware of. So would this go in my Gruntfile then? – Sagittarius

Right, but I'm guessing you installed the grunt-cli at somepoint, and that's where the grunt file is located. I think on Windows you can locate a file using the where command? #304819 – Mcnulty

Sorry, it would not go in your Gruntfile.js, this edit has to go in the grunt executable – Mcnulty

I have found grunt.cmd which is the executable. That led me to C:\Users\kris\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt ... In that file I changed #!/usr/bin/env node to #!/usr/bin/env node --debug-brk. After that I ran grunt command but no breakpoint is hit and nothing shows up in the debugger. – Sagittarius

What you need to do in order for this solution to work, is to run the script contained within that grunt.cmd using node --debug-brk. By changing the first line, this should have done that, but if not try executing the script using with node --debug-brk. So for instance, node --debug-brk C:\Users\kris\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt.cmd – Mcnulty

C:\Users\kris\AppData\Roaming\npm\node_modules\grunt-cli\bin` directory has a file called grunt` with no extension.. C:\Users\kris\AppData\Roaming\npm` contains the grunt.cmd` file. This creates a wrapper to handle the #!. As discussed in this thread #10396805. When I run the command node --debug-brk C:\Users\kris\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt I get the cannot find module error. – Sagittarius

The goal state is to somehow execute the grunt script contents via node --debug-brk. Since I don't have access to a windows machine, I don't know which file to call with that command. You'll know when it works because (no matter what you've done elsewhere) the grunt command will simply wait, outputting debugger listening on port 5858 to the command prompt (and not run through your Gruntfile.js). – Mcnulty

In your answer, where is the port 8080 coming from. Did not get it. 127.0.0.1:8080 – Gignac

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

Presnell

Using node-debug is way easier than the others. It just works. Thank you! – Poverty

Windows users could possibly be annoyed by node-inspector bug 918, for which there is a workaround described inside the same thread. – Dziggetai

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.

Pammie