All geek questions in one place

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

So, I spent the last couple of days trying to get this to work without any luck. Most of the solutions I found seem to work “well” for debugging node applications. But I did not have much luck debugging the work. I would like to be able to set breakpoints in my grunt file and either skip the code using a browser or using the IDE.

I tried the following:

ERROR MESSAGE USING node-INSPECTOR

enter image description here

So currently the node inspector feels that it has made me 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, as I mentioned above, as soon as I hit F8 to go to the breakpoint, it crashes with the above error. Has anyone had success using this method to try and debug a Gruntfile? So far, I have not found a very well documented way to do this. Therefore, I hope this will be useful or useful information for future users. In addition, I am using Windows 7 . Thanks in advance.

UPDATE:

I tried the following suggested by @dylants, with no luck.

  • The grunt.cmd file was found on a Windows machine located in C:\Users\khollenbeck\AppData\Roaming\npm . I opened the grunt.cmd file and found the following ....

    enter image description here

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

  • After running 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

  • Then I ran the grunt command from the grunt directory. (leaving the server at the original command prompt)

From here, I expected Gruntfile.js to appear in the chrome dev tools source. I also expected to be able to set breakpoints from there. That did not happen. Instead, it simply went all the way through the Gruntfile without hacking or loading in the browser.

Edit:

Ah, I see what I did wrong. For some reason, I made node --debug-brk without adding the path C: \ Users \ khollenbeck \ AppData \ Roaming \ NPM \ node_modules \ grunt-Cli \ Bin \ grunt. His job now, thank you very much. We apologize for the drag and drop for so long. But hopefully it will be useful for other Windows users in the future.

+6
source share
3 answers

This can be done by running node-inspector and running grunt in debug mode. After that, you can go through Gruntfile.js in Chrome, as usual.

start node inspector

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

 $ 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

Then find the grunt script. This is the javascript file that is executed when the grunt command is run from the command line. If you installed grunt all over the world (using npm install -g grunt-cli ), then it will most likely be located in /usr/bin or /usr/local/bin for * nix or Mac machines. For Windows machines, the grunt.cmd file indicates 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 .

After you find the location of the script, use node --debug-brk to execute this script, thereby running grunt in debug mode, breaking the first line of code in the file. For example, suppose the grunt script is located in /usr/bin/grunt :

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

You will find out that you have succeeded when you see debugger listening on port 5858 as the output, which means that the grunt script has stopped execution and expects that the transition with the debugger will be completed.

debugging with chrome

Now pick up Chrome and point it to http://127.0.0.1:8080/debug?port=5858 . In Chrome, open and add breakpoints in Gruntfile.js and complete the step as usual.

+10
source

To start the node inspector, you no longer need to pass the -debug or -debug-brk flag. You can run it directly using the node-inspector and the file path, just as you would normally run a script using the node command. This should automatically open the webkit inspector in chrome and pause on the first line of execution. You can insert your breakpoints here and debug as usual.

As mentioned above, to debug the grunt task, you will need to find the Grunt executable using $ which grunt on Mac, not sure about Windows. Then you will need to copy this path and use it as the first argument passed to node-debug, the second argument being the task (and if necessary you can also include the target face). For example, it might look like this:

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

and from here you can debug any file that will be executed to complete the concat task. This includes grunt-concat dependencies, which will be local node_modules in it. Since I was very unpleasant to copy and paste my executable path, I made the simplest Node cli to distract it https://github.com/dtothefp/node-build-debug . If you install this globally (and, of course, the node inspector is installed globally), you can:

$ build-debug grunt concat:dev

+7
source

Newer versions of Node (starting with 6.3, I think) have a built-in debugger / inspector:

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

Just run the Grunt application like this (on Windows):

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

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

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

+1
source

Source: https://habr.com/ru/post/970198/

More articles:


All Articles