I'm unable to use Visual Studio Code to debug my node application.
My .vscode/launch.json looks like this:
{
"version": "0.2.0",
"configurations": [{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 9001
}]
}
I use grunt-contrib-connect to start my web server. My connect task is defined my my gruntfile.js like this:
connect: {
server: {
options: {
debug:true,
port: 9001,
base: '.',
livereload: true,
},
},
},
After successfully starting the web server with the above task, I try to attach from VSCode, but apart from some UI flashes, nothing seems to happen. No breakpoints are hit.
I read the VS Code Debugging Documentation, especially the Attaching VS Code to Node section, which is why I added the debug:true to my connect task. However this did not seem to fix anything.
If I understand the "port" in grunt-contrib.connect correctly, then this is the port on which the webserver will respond, not the debugging port.
So in your .vscode/launch.json you must specify the debug port not the webserver port. Since grunt uses node, I assume the debug port is node's default port 5858.
Related
I'm using VSCode to debug a node.js script running on a remote linux server on my LAN. I'm using the RemoteSSH plugging to access the scripts, save, and edit it. I can also run it from the VSCode just fine. But I tried to use this article here to setup remote debugging:
https://dakshika.medium.com/remote-debug-node-js-application-using-visual-studio-code-dc0fa0b4dec4
I did modify the commandline command to start the node.js debugger since my server has an older version of Node (Node 8.10.0). I have to use the following:
node --inspect-brk=127.0.0.1:9229 scripts/myScript.js
After running the command, it shows that node is listening for connections. But when I run my Attach launch configuration:
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 9229,
"address": "127.0.0.1",
"restart": false,
"sourceMaps": false,
"continueOnAttach": true,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
it doesn't do anything. The run/pause/stop buttons come up but it doesn't jump to the first line of code so I can step through. Any idea what could be going on?
We're using node v18.3.0
I'm starting my nestjs app, inside a docker container, with this command nest start -e \"node --inspect-brk\". Which gives the following output:
node#bfcdb32e737f:/opt/thallo/exchange-be$ npm run test:debug:wait
> exchange-be#0.0.1 test:debug:wait
> nest start -e "node --inspect-brk"
Debugger listening on ws://127.0.0.1:9229/c4d73a54-6165-4502-bcea-1fa4390db95c
For help, see: https://nodejs.org/en/docs/inspector
So it looks like it's waiting for a debugger to attach - excellent!
I have forwarded port 9229 on the docker container, docker ps:
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
bfcdb32e737f exchange-be_exchange-be-uiapi "tail -f /dev/null" 7 minutes ago Up 7 minutes 0.0.0.0:3001->3001/tcp, :::3001->3001/tcp, 0.0.0.0:9229->9229/tcp, :::9229->9229/tcp exchange-be-uiapi
And I can telnet to that port from the host machine telnet localhost 9229:
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.
Connection closed by foreign host.
This is my launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach Exchange BE",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"restart": true
}
]
}
But when I launch the debugger I just get this little progress bar for a few seconds and then the debugger stops:
But there's no error log or anything so I have no idea how to fix this. Any help is greatly appreciated!
For debugging a NodeJS application running a docker 127.0.0.1 interface wont reach the docker network try using 0.0.0.0.
In the debug command at the package json change it to nest start -e \"node --inspect-brk=0.0.0.0:9229\"
The 0.0.0.0 will tell the debugger to look at all available local network interfaces.
In the vscode debug configuration "address": "0.0.0.0" and it is recommended to use "remoteRoot" and "localRoot" directives for syncing the position of the current vscode work directory files to the files in the docker file system.
I currently have a nuxt app setup as a univeral app in which I'm hosting using Docker. I've got pretty much everything working, the debugger attaches and finds local variables just fine when walking through middleware and api calls, but when debugging the asyncData method in the .vue file I can't see any of the local variables and my breakpoint keeps moving to the .catch line:
I also get a bunch of other random things in the current context, which in this case is "Module"??
I've added this line to my nuxt.config.js file as well to make sure it uses the correct source maps:
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
console.log(`IsClient: ${ctx.isClient}`);
console.log(`isDev: ${ctx.isDev}`);
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
}
Also here is my .vscode config:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"remoteRoot": "/usr/share/nginx/app",
"port": 9229,
"address": "localhost",
"localRoot": "${workspaceFolder}/app",
"protocol": "inspector",
"restart": true,
"sourceMaps": true
}
]
}
Also, here is the command I use to start the container:
node --inspect=0.0.0.0:9229 \
./node_modules/.bin/nuxt \
& nginx -g "daemon off;" \
I've tried a lot of different things including using babel-register and starting it with babel-node since its transpiled, but none of those methods worked.
Is there anything I'm missing here? Can we just not debug .vue files on the server when creating a universal app?
UPDATE
I switched to Webstorm and for whatever reason the debugging works flawlessly. I guess that is the difference between using an IDE and a text editor.
vs code attach inspector when your nuxt app is already started.
To see whats happen in server side, vs code have to launch your nuxt app.
Add this script to your package.json:
...
scripts: {
"dev": "nuxt,
"dev-debug": "node --inspect node_modules/.bin/nuxt",
...
}
...
In .vscode config or .vscode/launch.json:
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch nuxt",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev-debug"
],
"port": 9229
},
...
And finally, extend the build in nuxt.config.js to add source maps when we are running in development mode and ensure the correct type for both the client and server.
build: {
extend(config, ctx) {
if (ctx.isDev) {
config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
}
}
}
It's work for me on localhost, but I'm not sure it's working with remote root...
Also, it's not a perfect solution. I saw sometimes breakpoint jump from different line. I think this is because vs code cannot handle same lines in source and inline-source.
Alternative way:
To debug only javascript of a single file component (.vue), it's possible to extract the javascript part in an external .js file, and import it with <script src="./path-to-js"></script>.
This is my first time trying to setup Nodejs with debugger tool. My lauch.json code is:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
},
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}"
}
]
}
When I run the debugger in VS code and go to debug console. I get:
C:\Program Files\nodejs\node.exe --inspect-brk=29182 app.js
Debugger
listening on ws://127.0.0.1:29182/c2a39cf7-ab13-4sd1b-afs5-eb9wqwq5de9
I have setup a breakpoint on my app.js as well.
I have tried to go to the
ws://127.0.0.1:29182/c2a39cf7-ab13-4sd1b-afs5-eb9wqwq5de9
url as shown in the debugger but it give me:
Site cannot be reached
error in chrome
No this is the port where debugger is listening you are not supposed to go to that path,you will go to your port where your nodejs server is listening and debugger will listen to that.
For Example:
I have a node server running on port 3000 and I have a get request like this
app.get('/',()=>{
console.log("This is get request");
})
and I have a break point on this line: console.log("This is get request");. I will start server by running debugger.
Then I will go to localhost:3000 from postman to check and debugger will called automatically.
Hello i have problem with debug my app of node and visual studio code. When i tried run debug in visual i saw text " Debugger listening on port 30108
" but when i open my browser on localhost:30108 there is only information somethig like this
Type: connect
V8-Version: 4.5.103.36
Protocol-Version: 1
Embedding-Host: node v4.4.7
Content-Length: 0
on localhost:3000 (default app port) there is only error
" This site is unreachable "
So how to do, to be able to debug app with running app in browser ?
If you do a node app.js or npm start (or whatever for your project) in a terminal/command window, does your project also start successfully? Which OS are you using? Any firewall issues going on?
If you can access the site in your browser outside of VS Code, check my "Third attempt" documented here. Essentially, you need to edit both your launch.json and your package.json to indicate the port you are going to use. My examples follow the npm run {script name} format. You should be able to tailor it to suit.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm.cmd",
"runtimeArgs": [
"run", "start"
],
"port": 5858,
"skipFiles": [
"<node_internals>/**/*.js"
]
}
]
}
package.json
"scripts": {
"start": "node --inspect=5858 src/app.js",
}
Essentially, you need to ensure you are launching your app the same way you would from the command line. Then, ensure you have the matching port info in both files (and their respective locations) mentioned above.
More info available here for alternate/additional configuration options for debugging.