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

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.

Related

Issue debugging remote node.js script in VSCode

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?

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}"
}
]
}

How to debug typescript files in vs code when using webpack

I use typescript for nodejs server and I also use webpack and then output server.js file located in build folder not beside server.ts.
When I use server.js in launch.json, debugger works and ofcourse hits breakpoints in bundled server.js file. the configuration in launch.json like below:
"name": "Nodemon Launch Server",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}/server/build",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/server/build/server.js",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"outFiles": [
"${workspaceFolder}/server/build/*.js"
]
but I want to debug ts files and set breakpoint on typescript codes not js.
but when I change launch.json program as below:
"program": "${workspaceFolder}/server/server.ts",
it gives this error when I run the debugger:
Cannot launch program '...' because corresponding JavaScript cannot be found.
How can I fix this to debug ts files not webpack bundled js file?
The first one you should check is that the source maps has been generated. After that maybe you have to setup outFiles (e..g.:"outFiles": ["${workspaceFolder}/path-to-my-compiled-files/**/*.js"]).

How to call API from backend under vscode debugger?

How can I call an API which is being served by the vscode debugger?
I would usually call http://localhost:3000/api/plugins, but clearly my project isn't served on that port. My launch.json look like this:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/server/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false,
"outDir": null
},
and the output from the debug console:
node --debug-brk=12834 --nolazy server\app.js
Debugger listening on [::]:12834
MongoDB Connection Succesful
I have tried the API with Postman on both localhost:12834 and localhost:5858 (which is the port in the attach configuration - neither work...
In visual studio code, you can debug node.js code with its inbuilt debugger. For that you don't need to call api with the debugging port(In your case 12834). You just need to call with port defined in your express configuration (generally 3000).
You have to start debugging from visual studio code with F5. So, your debugging start for the project and you need to put break point on method, you want to debug. So, when your api call from frontend, you will get point on vscode.

Visual studio code, debug not working

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.

Resources