simplifying debugging of next.js (client and server) in VS code - node.js

My current method is to run npm run dev in a terminal. which uses cross-env NODE_OPTIONS='--inspect' next dev (i tried it without cross-env and it wont run).
then i attach a node debugger to the running process with the following script in VS code
{
"name": "Attach",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node",
}
and then finally i launch chrome with another debugger script
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
I have tried the solution outlined here and the process don't run.
I have also tried this configuration (both node and node-pwa variants) they run but dont seem to actually do any debugging, nor are there any messages in the console (or debug console).
{
"type": "node",
"request": "launch",
"name": "Launch via NPM: node",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"dev"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
}
idealy, i would like to be able to press a single button and have it all launch up for me, currently it is a 3 step process, but i would happily take converting the attach task to a launch task.

Related

(Unbound Breakpoints) How to debug nestjs project in vscode for nx project

I am trying to debug my nestjs application created by NX project in vs code. I added Launch.json file which is look like below. I have two projects in it one is angular and second one is nestjs I want to debug my nestjs project.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"skipFiles": ["<node_internals>/**"]
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/serve",
"outFiles": ["${workspaceFolder}/**/*.js"]
}
]
}
Whenever I try to add breakpoints they are become grey in color and shows that they are unbound breakpoints even after pointer goes to the breakpoint still not pause at it. Please help me with any solution.

NodeJS debugging not working with bot framework - Breakpoints not working

I'm trying to follow some tutorials, one is here: https://github.com/OfficeDev/TrainingContent/tree/master/Teams/20%20Messaging%20Extensions/Demos/01-msteams-msgext
The instructions for debugging basically say that I should have this in launch.json:
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858,
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"remoteRoot": "${workspaceRoot}/src/"
}
I then run gulp serve --debug, but it's not launching in debug mode. Then I try hitting F5, but I get this:
Any idea?

debugging apollo, docker and typescript on VS code

I am trying to make the debugger work on VS code using node but without any success as breakpoints are not hitting.
I tried to set the launch.json in many different configs but with no luck.
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"skipFiles": [
"<node_internals>/**"
]
},
{
"type": "node",
"request": "launch",
"name": "Server",
"runtimeExecutable": "nodemon",
"program": "${workspaceRoot}/src/index.ts",
"console": "integratedTerminal"
},
I am using a graphql running on node apollo and typescript on my machine with Visual Studio Code

VSCode Debug Node app using Inspector protocol

I am running node app using pm2 with --inspect flag. I am able to debug my app on the following url:
chrome-devtools://devtools/remote/serve_file/#62cd277117e6f8ec53e31b1be58290a6f7ab42ef/inspector.html?experiments=true&v8only=true&ws=local.abc.com:9003/node
How can I debug this application using VS Code built in debugger?
If you have launched your node app from the command line create this "attach" launch config:
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9222,
"protocol": "inspector"
}
or let VS Code launch your app and attach to it in one go:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/your_app.js",
"protocol": "inspector"
}

What is the proper way to debug an npm script using vscode?

I've got an npm script that I'm trying to debug. I use vscode so I thought I'd create a debug configuration and step through it with the debugger.
My npm script look is:
"scripts": {
...
"dev": "node tasks/runner.js",
}
So I created the following debug config:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"runtimeExecutable": "npm",
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"run", "dev"
],
"port": 5858,
"stopOnEntry": true
}
]
}
And when I fire it the script runs, but vscode is never able to connect and I get the error:
Cannot connect to runtime via 'legacy' protocol; consider using 'inspector' protocol (timeout after 10000 ms).
I tried adding an inspector protocol:
{
"type": "node",
"request": "attach",
"name": "Attach (Inspector Protocol)",
"port": 9229,
"protocol": "inspector"
}
And running the npm script via:
npm run dev --inspect
And this time I get the error:
Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229).
I'm not sure what part I'm missing.
Edit per duplicate tag
I see the other question re: debugging an npm script via vscode, but the details in the other question and answers aren't as detailed and specific. If someone is searching for the specific vscode error messages I ran into or the config type I had they wouldn't necessarily get the level answer detail that this question's chosen answer gives.
You shouldn't try to debug the npm script because what you really want is to attach your debugger to the script that is launched with npm run command (NPM here is used only as a task runner).
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/tasks/runner.js"
}
]
}
If you really want to run it using npm script, then you can use the following configuration:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"run-script",
"dev"
],
"port": 5858
}
but you also have to change your script command (specify a debug port)
"scripts": {
"dev": "node --nolazy --debug-brk=5858 tasks/runner.js"
},
You can explore various debug configurations simply by clicking the gear icon and selecting one.
More about Node.js debugging can be found in the VS Code documentation.

Resources