Kris Hollenbeck Kris Hollenbeck - 4 days ago 6
Javascript Question

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

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:



ERROR MESSAGE USING NODE-INSPECTOR

enter image description here

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

    enter image description here

  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

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.

Comments