I try to debug a grunt task with Chrome DevTools on Windows using the following command
node --inspect-brk node_modules\grunt\bin\grunt
This works nicely and the Chrome debugger stops in the root grunt javascript. But of course, I do not want to debug grunt, but my own "gruntfile.js". How can I set a breakpoint into that file, as it is not loaded yet?
I tried to add my project folder in the Chrome DevTools under "FileSystem", but whatever I add there as a breakpoint does not stop.
Related
I use WSL to start VSCode with code . from my project directory in Windows Terminal. When VSCode starts up, "Auto Attach: Off" is shown in the status bar:
Clicking "Auto Attach: Off" in the status bar does not toggle it.
I then start my project in VSCode's integrated terminal with npm run debug, which corresponds to the following scripts line in package.json:
"scripts": {
"debug": "NODE_ENV=development DEBUG='knex:*' nodemon --inspect ./server.js"
}
However, the debugger is not auto-attached, so I need to manually run the Attach configuration from the Run panel shown on the left here:
The debugger works, but I still cannot toggle the Auto Attach: Off to be On instead:
Even if I Ctrl+Shift+P --> Debug: Toggle Auto Attach, nothing happens. Even if I restart VSCode after doing so.
So, in conclusion, how can I start my VSCode with code . from Windows Terminal and then just type npm run debug and have VSCode, run my program AND auto-attach the debugger? I also need the server to restart upon file changes, which is why I am using nodedemon in the npm run debug script.
Do I need to either:
change launch.json configuration? Though I have tried essentially all of the boilerplate launch.json configs shown in VSCode, but none worked.
or modify my package.json defined script for debug?
or correct some setting on VSCode?
I added in package.json this into scripts:
"debug": "NODE_PATH=src nodemon --exec babel-node src/run.js --inspect",
It is pretending that it is debugging but jumping on selected lines how it pleases. I'm not that "expert" in JavaScript (I'm Java) but really this is pain in ass.
How can I debug backend without debug? Srry I'm angry because this is second time I'm giving change to JavaScript and this is second time I'm furious about this stupidity.
Thanks for any hints.
P.S.: if there is better software, tool to debug please just refer to it
In WebStorm, the easiest way to debug the application started via NPM stript is using the icon in the gutter: open your package.json in editor, right-click the icon to the left of your script and choose debug:
See also https://blog.jetbrains.com/webstorm/2017/09/debugging-node-js-apps-in-webstorm/
Note that:
babel-node is deprecated and not recommended for using in production. To get ES6 code compiled on-the-fly, try running node with -r #babel/register. see https://babeljs.io/docs/en/babel-register
by running nodemon --exec babel-node src/run.js --inspect, you pass --inspect to your application, not to node interpreter, so this command doesn't start the debugger. Node options have to be specified before the javascript file, otherwise the passed options will be treated as application arguments, not as node.js args
Right now, VSCode(Visual Studio Code) is considered as best tool for development, which is light weight and user friendly.
You can get different extensions based on your requirement.
To debug node js in vscode, go to debug window -> add configuration -> type attach process -> press ctrl + space -> press enter on attach suggestion.
After that, run command, node "your file name" --inspect
Press F5, your debugger will be attached
Node js debugging using VSCode
Node inspect does not show source code to debug in chrome devtools.
I tried to run code using command
node --inspect server.js
then i opened chrome://inspect/#devices
and then clicked Open dedicated DevTools for Node.
But this doesn't show up my server.js file but shows recently opened files in devtools.
Found the problem. There is an issue in chrome. Here is the link of the issue https://bugs.chromium.org/p/chromium/issues/detail?id=941608#c15
By updating chrome into beta version, solve my problem.
I am trying to debug protractor scripts on VSCode.
I edited the launch.json file but the debug console throws the below error.
Here is the VSCode Debug Console Output:
C:\Program Files\nodejs\node.exe --inspect-brk=45448 conf.js C:\Users\abc\AppData\Roaming\npm\node_modules\protractor\example/conf.js
Debugger listening on ws://127.0.0.1:45448/ab61a2d7-4b40-456b-86cb-838e94dfe5b0
Debugger attached.
Waiting for the debugger to disconnect...
I am not able to find a solution anywhere online either.
When you set your breakpoint in VSCode, you'll need to run the following:
node --inspect-brk ./node_modules/.bin/protractor conf.js
The path above assumes Protractor is installed in your node_modules/.bin/ directory locally in your project.
Next navigate to chrome://inspect. You will have to skip the entry point of Protractor and then you should hit your breakpoint. Make sure you are using node 8 to avoid getting polyfill-ed promises.
We go over this in detail in the ng-conf video. We kick off the test with a script that uses this e2e-debug command which is the equivalent to the above.
I have three files in ./
main.ts
main.js
main.js.map
I am doing node inspect-brk ./main.js,
opening chrome, typing chrome://inspect
Debugger is in the pause state.
I press F10 to make a step.
The problem is that chrome dev tools can't see ts file.
All settings in chrome that allows to see source maps are settled.
Chrome writes that Source Map detected and instructs me to add associated files in tree.
I have tried to add main.ts in workspace but chrome don't want to jump into it.
What do I have to do to walk through ts code?
Node.js version is v8.0.0
Chrome 59.0.3071.86
Type Script 2.3