Visual studio code, debug not working - node.js

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.

Related

Debugging an electron app in Visual Studio Code

Could I please ask for help with the following?
I have an electron app (basically the quick start app so very very simple).
I am viewing the code with Visual Studio Code. I run the project from the terminal window in Visual Studio Code with the command "npm start". All works fine.
I want be able to debug the electron code in main.js. So I clicked on "Run and Debug" and selected "Create a launch.json file". From the subsequent drop down I then selected "Node.js". This produces the launch.json file:
{
// 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": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\main.js"
}
]
}
If I now click on "launch Program" I get:
Error: Cannot find module 'electron'
I have electron installed globally, so I added this line:
"runtimeExecutable": "C:\\Users\\MyUserName\\AppData\\Roaming\\npm\\node_modules\\electron\\dist"
Now I get:
C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist .\main.js
Error: spawn C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Thanks for any advice that enables me to run and debug this via the "Run and Debug" button rather than just running it via "npm start" from the terminal window.
The solution I found is here: https://www.electronjs.org/docs/latest/tutorial/debugging-vscode
The launch.json that they give at that address is:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"outputCapture": "std"
}
]
}
I copy and pasted the above in to my launch.json and my Electron app immediately started working in VS Code just like when I manually call 'npm start' from the console. Except it's better than just 'npm start' because for the server-side js files, debug breakpoints actually work!

VS Code Debugger does not kill node process after stopping the debugger

I am working on a node.js application using express.js as a web framework listening on PORT 3000.
I am using VS Code v1.46.
My launch.json file 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}\\WebApi\\index.js",
"restart": true,
"protocol": "inspector"
}
]
}
I am able to start the debugging session for the first time, but 2nd time onwards, I get error Error: listen EADDRINUSE: address already in use :::3000
This error is because VSCode didn't terminate the node.exe process created in 1st debugging session and so in the subsequent session node failed to start the express server on port 3000 as it is still in used.
Can anyone help me to configure VSCode to terminate node.exe process once I stop the debugger?
This issue started just last week for me, not sure why, maybe windows update.
Any way I found the following :
https://github.com/OmniSharp/omnisharp-vscode/issues/2387
where they say that if you add to launch.json
"console": "externalTerminal" or "console": 'integratedTerminal'
it will open a console for the process so that u can kill manually
It works fine with the Using the "preview" debug extension.
This is the launch.json for using that mode, just make sure that you put the correct command of your package.json.
{
"version": "0.2.0",
"configurations": [
{
"type": "node-terminal",
"name": "Run Script: start",
"request": "launch",
"command": "npm run start",
"cwd": "${workspaceFolder}"
}
]
}

Visual studio code Debugger not getting attached with sample express project generated by express generator

Node js Version :v8.11.3
VS Code version :1.29.1 x64
npm version :6.6.0
Hi ,
I have created a default express skeleton project using express --view=jade myapp command after that cd myapp/ and npm install in the last.
Now I am trying to attach vscode debugger to this newly created project but no luck.
This is the content of 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"protocol":"inspector",
"port":3000,
"program": "/home/pankaj/myfirstapp/myapp/app.js"
}
]
}
I am also not able to see any error in the debug console .There is nothing in debug console neither success nor failure.
Thanks In advance
Be careful for express default setup to set the path of program in launch.json to "program": "${workspaceFolder}/bin/www"
Port 3000 is the application port of your express application. If you specify this in your launch configuration, the VS Code debugger will try to use it as the debug port (which obviously cannot work).
In addition, use VS Code variables to specify where your programs lives. E.g. if you have opened VS Code on your myapp directory, use ${workspaceFolder}/app.js for the program attribute:
E.g.:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}

VS Code debug port mismatch

Details
In Win10. VS Code, Help, About...
[Window Title]
Visual Studio Code
[Content]
Version 1.14.2
Commit cb82febafda0c8c199b9201ad274e25d9a76874e
Date 2017-07-19T23:34:09.706Z
Shell 1.6.6
Renderer 56.0.2924.87
Node 7.4.0
Generated launch.json, adjusted with my runtime... settings
{
// Use IntelliSense to learn about possible Node.js debug 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",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm.cmd",
"runtimeArgs": [
"run", "functional-test"
],
"skipFiles": [
"<node_internals>/**/*.js"
]
}
]
}
Npm script referenced above...
"functional-test": "node test/functional/run-foo-tests",
First attempt
I then launch a debug session (F5), which in the Debug Console then yields...
Debugging with inspector protocol because a runtime executable is set.
npm.cmd --inspect=32825 --debug-brk run functional-test
Note the additional flags that aren't specified anywhere in my package.json or launch.json.
In addition to that message above, I am shown a popup in the IDE referencing a connection timeout error...
Cannot connect to runtime process, timeout after 10000 ms - (reason:
Cannot connect to the target: connect ECONNREFUSED
Second attempt
If I change the npm script as follows (include --inspect flag)...
"functional-test": "node --inspect test/functional/run-foo-tests",
The Debug Console states...
Debugging with inspector protocol because a runtime executable is set.
npm.cmd --inspect=17976 --debug-brk run functional-test
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
Note different port settings. At least the debugger is starting and giving me a port to try and target instead.
Where is it getting those values? How can I make them match (without manually editing both launch.json and npm script to assign the same port for both)?
It never successfully loads and instead I am shown the popup message at the top (mentioned above.)
Third attempt
If I edit the npm script to add the port...
"functional-test": "node --inspect=9229 test/functional/run-foo-tests",
And edit launch.json's port setting to match...
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm.cmd",
"runtimeArgs": [
"run", "functional-test"
],
"port": 9229,
"skipFiles": [
"<node_internals>/**/*.js"
]
}
]
I then am rewarded with the following message in the Debug Console...
Debugging with inspector protocol because a runtime executable is set.
npm.cmd run functional-test
Debugger listening on port 5858.
Warning: This is an experimental feature and could change at any time.
{Expected console output...}
It will then work correctly (AFAIK!) Note that now the Debug Console's second line (echoing/logging the command ran) now matches the launch.json runtimeArgs settings (where it did not in the first and second attempts.)
Aside from skull-smashing brute force of trial and error, how was one supposed to figure this out (and surely there must be a better way?)
Fourth attempt
Trying to set the port both for the npm script call (obviously not the same as the node ... call in the npm script) and the port config param and it fails as in the first example.
"runtimeArgs": [
"run", "functional-test", "--inspect=5858"
],
"port": 5858,
Fifth attempt
Of course, as I was writing this, I finally found something like an answer via google...
"scripts": {
"debug": "node --nolazy --debug-brk=5858 myProgram.js"
},
Adjusting my script to match yields (in Debug Console)...
Debugging with inspector protocol because a runtime executable is
set. npm.cmd run functional-test (node:12420)
DeprecationWarning: node --debug is deprecated. Please use node
--inspect instead. Debugger listening on 127.0.0.1:5858
I am also shown a different popup at the top...
Cannot connect to runtime process, timeout after 10000 ms - (reason:
Cannot connect to the target: Parse Error).
Sixth attempt
If I change my script to match the info in the Debug Console...
"functional-test": "node --nolazy --inspect test/functional/run-foo-tests",
Debug Console says...
Debugging with inspector protocol because a runtime executable is set.
npm.cmd run functional-test
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
And popup is...
Cannot connect to runtime process, timeout after 10000 ms - (reason:
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1

Can I run/debug Heroku Node.js app locally with VSCode?

TL; DR
On Microsoft VSCode v1.6.1, how to:
Properly set runtime executable?
Properly pass Heroku arguments?
Run Heroku Node.js app?
Debug Heroku Node.js app?
Details
I have created a Heroku Node.js application, which is launched using the CLI command:
heroku local web
and successfully starts at port 5000.
I am trying to debug it using Microsoft Visual Studio Code, using the following launch.json configuration:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": "/usr/local/bin/heroku",
"runtimeArgs": [
"local web",
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false,
"outFiles": []
}
But VSCode is automagically passing --debug-brk argument to heroku, causing the error:
/usr/local/bin/heroku --debug-brk=23080 'local web' app.js
! `--debug-brk=23080` is not a heroku command.
! See `heroku help` for a list of available commands.
VSCode also does not find heroku command without its full path (seems like it is not loading PATH environment variable).
Any ideas about how to setup the editor?
The following solution works for me:
1) In your procfile add the parameter --debug to the node process
web: node --debug server.js
By default the debugger listens in the port 5858
2) Once you have the node process running, open VSCode and add the following configuration to your launch.json file
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
3) Finally, click the play button in VSCode with the option "Attach to Process" and it should debug your process.
The following solution worked for me.
In my package.json "scripts", I added:
"debug": "node --inspect-brk server.js"
Then, in launch.json I added an envFile entry to the default "Launch via NPM" configuration, which now looks looks like this:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"envFile": "${workspaceFolder}/.env"
}
The above solution enables the VSCode debugger to run my server via an npm script, and my server runs with the env vars set in my .gitignore'd .env file, just like in the "regular" Heroku node.js workflow.
I struggled with this as for some reason the solution propsed didn't work for me. However, an alternate solution did so I thought I would share.
From the default debugging options in VS Code choose
Attach by Process ID
When you start the debugger with this configuration it should list available processes to attach to and one should be simply be server.js. This requires manually attaching each time, and if the other automatic attachment works for you that may be better, but this is still a workable solution.

Resources