while debugging in vscode changes in nestjs file does not take effect - node.js

I have a nestjs project in vscode and in debugging mode the changes in code does not take effect. Breakpoints hit normally, however, but for example a changed variable values are not to be seen - i.e. they stay as the previous ones (the ones before change).
My launch.json is the following:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Nest Framework",
"runtimeExecutable": "nodemon",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register", "--config", "nodemon-debug.json"],
"program": "${workspaceFolder}/src/main.ts",
"autoAttachChildProcesses": true,
"restart": true
}
]
}
And the nodemon-debug.json file has the following:
{
"watch": ["src"],
"ext": "ts, js",
"ignore": ["src/**/*.spec.ts"]
}
And strangely enough, when I make change in the code, the nodemon really registers it and restart the app, as can seen from the console:
C:\...\AppData\Roaming\npm\nodemon.cmd --nolazy -r ts-node/register --config nodemon-debug.json .\dist\main.js
[nodemon] 2.0.18
c:\...\AppData\Roaming\npm\node_modules\nodemon\lib\utils\log.js:34
[nodemon] to restart at any time, enter `rs`
c:\...\AppData\Roaming\npm\node_modules\nodemon\lib\utils\log.js:34
[nodemon] watching path(s): src\**\*
c:\...\AppData\Roaming\npm\node_modules\nodemon\lib\utils\log.js:34
[nodemon] watching extensions: ts,js
c:\...\AppData\Roaming\npm\node_modules\nodemon\lib\utils\log.js:34
[nodemon] starting `node --nolazy -r ts-node/register .\dist\main.js`
c:\...\AppData\Roaming\npm\node_modules\nodemon\lib\utils\log.js:34
[WEB] http://localhost:3000
Can anyone figure out why changes are not taking effect?

I finally found solution from this https://stackoverflow.com/a/63325135/7625979
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Nest Framework",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"start:debug",
"--",
"--inspect-brk"
],
"autoAttachChildProcesses": true,
"restart": true,
"sourceMaps": true,
"stopOnEntry": false,
"console": "integratedTerminal",
}
]
}
This solution indeed works for me perfectly and does not need either the vscode's setting: Debug > Javascript: Auto Attach Filter to "Always". Also console: integratedTerminal -option is handy because debug-info comes directly into the same console. Also, nodemon-debug.json is not now needed.
Script command in Package.json file are now:
"scripts": {
...
"start:debug": "nest start --debug --watch",
...
}
It seems that "--watch" is still needed here for the code changes to take effect.

I don't have a launch.json in my NestJS project in VSCode.
However, I did change the debug settings in VSCode to the following:
file -> preferences -> settings -> Debug > Javascript: Auto Attach Filter to "Always"
Then when I set a breakpoint my test stops on the breakpoint. If I make a change and save the file my test will restart automatically and stop on the breakpoint with the updated values.

Related

How to get VSCode to attach to nodemon started by NPM?

Can I have VSCode kick off my app using NPM run scripts and then attach to the resulting process to debug?
My project kicks off with nodemon via NPM script (to execute babel, etc). However, while the app kicks off, VSCode's debugger doesn't attach (breakpoints are skipped).
// from package.json
"scripts": { "debug": "nodemon --inspect --exec babel-node src/app.js" }
// from launch.json
{
"type": "node",
"request": "launch",
"name": "Debug",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"address": "localhost",
"port": 9229,
"protocol": "auto",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"autoAttachChildProcesses": true
}
It seems the debugger starts but breakpoints I placed next to a few test calls are ignored. Here's the terminal output:
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node --inspect src/app.js`
Debugger listening on ws://127.0.0.1:9229/13ef6ca8-40da-4741-854a-467e4230b2a7
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Hey!
Waiting for the debugger to disconnect...
[nodemon] clean exit - waiting for changes before restart```
Looks like this was a fool's errand because it technically can't be done.

Visual Studio code - cannot connect to runtime process timeout after 10000 ms

I was trying to launch the program from the debug console in VS Code but got the error on cannot connect to runtime process timeout after 10000 ms
launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"protocol": "inspector",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}"
},
{
"type": "node",
"request": "attach",
"protocol": "inspector",
"name": "Attach",
"port": 9229
},
{
"type": "node",
"request": "launch",
"port":9230,
"name": "Launch Program",
"program": "${workspaceFolder}\\bin\\www"
}
]
}
I am trying to debug with VS Code but got hit by the error as below. Am I configuring my launch.json correctly ?
A "launch"-type configuration doesn't need to specify a port. When you set the port parameter, it assumes that your launch config will include the --inspect parameter with that port.
If you have to specify the exact port for some reason, then you can include the --inspect parameter like:
{
"type": "node",
"request": "launch",
"port":9230,
"runtimeArgs": ["--inspect=9230"],
"name": "Launch Program",
"program": "${workspaceFolder}\\bin\\www"
}
But I recommend just removing "port" from your launch config.
I'm using nodemon and babel to start visual studio code and found that you need to make sure you have a configuration in package.json and launch.json that are compatible with visual studio code.
Really, that means that you need to find a configuration that allows you to launch your regular configuration from powershell as well as gitbash in windows. Here's what I came up with:
In package.json
"scripts": {
"start": "nodemon --inspect --exec babel-node -- index.js",
},
In launch.json
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch via Babel (works)",
"cwd": "${workspaceRoot}",
"port": 9229,
"program": "",
"runtimeExecutable": "npm",
"console": "integratedTerminal",
"runtimeArgs": [
"start"
]
}
]
}
When node starts you should see something like:
PS F:\noise\bookworm-api> cd 'F:\noise\bookworm-api'; & 'F:\applications\nodejs\npm.cmd' 'start'
> bookworm-api#1.0.0 start F:\noise\bookworm-api
> nodemon --inspect --exec babel-node -- index.js
[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node --inspect index.js`
Debugger listening on ws://127.0.0.1:9229/e6e1ee3c-9b55-462e-b6db-4cf67221245e
For help see https://nodejs.org/en/docs/inspector
Debugger attached.
Running on localhost:3333
The thing you're really looking for is:
Debugger listening on ws://127.0.0.1:9229/e6e1ee3c-9b55-462e-b6db-4cf67221245e
This output shows that your debugger is waiting on a WebSockets request on port 9229. You communicate that to visual studio code with:
"port": 9229,
In your launch.json file.
If you don't see the port that the debugging server is waiting on then you probably need to add the --inspect flag to your start command in node.
I get this same error when I forget to close the browser from the last debug session. It holds on to the connection to the Angular proxy and prevents a new debug session from starting up. Once I close the browser, F5 starts up a new session without error.
duplicate Google Chrome shortcut → itest
press alt key doubleclick itest
itest Properties → Shortcut → Target :
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=6062 --user-data-dir="%appdata%\Google\Chrome\itest
VS Code, Menu Debug → Add Configuration → Chrome: Attach → "port": 6062, → Ctrl+Shift+D Debug → Switch Attach to Chrome → Start Debugging
Delete launch.json file and go to debug and create new launch.json file
Open Android Studio, Configure, ADV Manager, create or open an ADV.
In VS Code and in debug click emulate android cordova
Command line - cordova emulate android
{
"name": "cordova emulate android",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
// "ionicLiveReload": true
},
I am using docker-compose to run a react express app. You can see the full compose file below.
I got the mentioned error, and I added a port mapping as follows to resolve the issue.
- "9229:9229"
Also the if you are using visual studio code, the address configuration in launch.json file inside of .vscode should be as follows.
"address": "0.0.0.0",
The full launch.json file is pasted below as well.
The full docker-compose.yml file looks as follows.
version: '3'
services:
proxy:
build:
context: ./proxy
ports:
- 7081:80
redis-server:
image: 'redis'
node-app:
restart: on-failure
build:
context: ./globoappserver
ports:
- "9080:8080"
- "9229:9229" ######### HERE IS THE FIX ##########
container_name: api-server
ui:
build:
context: ./globo-react-app-ui
environment:
- CHOKIDAR_USEPOLLING=true
ports:
- "7000:3000"
stdin_open: true
volumes:
- ./globo-react-app-ui:/usr/app
postgres:
image: postgres
volumes:
- postgres:/var/lib/postgresql/data
- ./init-database.sql:/docker-entrypoint-initdb.d/init-database.sql
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=password
volumes:
postgres:
Here is the launch.json file.
Take a look at this reference for this file settings.
{
// 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": "3",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach", // The other option is launch
"port": 9229,
//"address": "localhost",
"address": "0.0.0.0",
//"localRoot": "D:\\Vivek\\MxWork\\Js\\GloboClientServer\\src\\globoappserver",
"localRoot": "D:/Vivek/MxWork/Js/GloboClientServer/src/globoappserver",
"remoteRoot": "/app",
"protocol": "inspector",
"skipFiles": [
//"<node_internals>/**",
"<node_internals>/**/*.js",
"${workspaceFolder}/**/node_modules/**/*.js"
]
//"program": "${workspaceFolder}\\src\\globoappserver\\index.js"
}
]
}
Go to Tools -> Options -> Debugging -> General
then disable
I'm using it successfully with the following options disabled.
In Visual Studio go to: Tools -> Options -> Debugging -> General
Enable JavaScript debugging for Asp.Net (Chrome, Edge, and IE)
Enable Legacy Chrome JavaScript debugger for ASP.NET.
In my case updating the core tools solved the issue.
Use the below command to update:
npm install -g azure-functions-core-tools

Run configurations - Cannot connect to runtime process

I'm atempting to run the node command npm run dev from the debugger in vscode.
My run config in launch.json:
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev"
],
"cwd": "${workspaceRoot}"
}]
My scripts in package.json:
"scripts": {
"dev": "npm run build:live",
"build:live": "nodemon --exec ./node_modules/.bin/ts-node -- ./app/*.ts"
}
But when i run the config i get this output:
npm --debug-brk=18538 run dev
> discordbot#1.0.0 dev /home/olian04/Documents/Projects/Node/JavaScript/DiscordBot.js
> npm run build:live
> discordbot#1.0.0 build:live /home/olian04/Documents/Projects/Node/JavaScript/DiscordBot.js
> nodemon --exec ./node_modules/.bin/ts-node -- ./app/*.ts
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `./node_modules/.bin/ts-node ./app/index.ts`
And then this error:
Cannot connect to runtime process (timeout after 10000 ms).
To me it looks as if it worked, but it still throws an error, and the code stops running when it does, why?
I ended up adding the "port" tag to the "configurations".
And the --debug-brk argument to the "build:live" node command.
Final configs:
"configurations": [{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"dev"
],
"port": 5858,
"cwd": "${workspaceRoot}"
}]
Final script:
"scripts": {
"dev": "npm run build:live",
"build:live": "nodemon --debug-brk=5858 --exec ./node_modules/.bin/ts-node -- ./app/*.ts"
}

Can Visual Studio Code be configured to launch with nodemon

I have installed nodemon as a global package in my system.
It works when I executed nodemon in cmd.
But when I am using vscode with this launch.json file, vscode throws this exception:
request launch: runtime executable XXX\XXX\XXX\XXX\nodemon does not exists
the launch.json is:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "app.js",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": nodemon,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"preLaunchTask": "",
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
]
}
when I erase the nodemin in runtimeExecutable it runs perfectly with node
First, install nodemon as a dev dependency:
npm install --save-dev nodemon
For newer versions of VS Code set up your .vscode/launch.json file like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
"program": "${workspaceFolder}/app.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}]
}
The most important pieces are the runtimeExecutable property that points to the nodemon script and the program property that points to your entry point script.
If you use an older VS Code (which you shouldn't), try this launch configuration:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch with nodemon",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/nodemon/bin/nodemon.js",
"args": ["${workspaceRoot}/app.js"],
"runtimeArgs": ["--nolazy"]
}
]
}
The most important pieces are the program property that points to the nodemon script and the args property that points to your normal entry point script.
I couldn't get #AdrianT's answer working with the debugger attached. It seems like there's a newer built-in supported way to do this:
Open the Launch Configuration dropdown and select "Add configuration..."
Select "Node.js: Nodemon Setup"
It will add something like this to your launch.json:
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceRoot}/app.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
Make sure your "program" setting is your correct entry point script.
You need to install nodemon globally to get this to work (npm install -g nodemon) (as per the documentation)
Your app now runs and you can set breakpoints which will be hit and the console logs to the integrated terminal window.
Note that terminating the debug session only terminates the program to debug, not nodemon itself. To terminate nodemon, press Control-C in the integrated terminal.
In Visual studio code create a launch config:
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"restart": true
}
run nodemon from the command line: nodemon --debug server.js
Now 'Attach' from VC and vuala.
Attaching is definitely an easy option. In order to make sure that your code breaks, make sure you run nodemon with --inspect-brk (node 8+), e.g.:
nodemon --inspect-brk src/app.js
After launching nodemon will log the port open for debug connections:
Debugger listening on ws://127.0.0.1:9229/someUUID
You can take that port in order to build your launch config which is quite simple:
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"restart": true
},
I tried the solutions Adrian and Mathew suggested. They seem to work perfectly if your are on macOS (maybe also on Linux). On Windows, maybe Mathew's solution is more stable. Combining both to have a solution that could be compatible with both macOS, Windows and Linux, and makes sure that we don't face with errors like "PATH not found", I found that using globally installed nodemon for debugging seems to be much more stable.
Install nodemon globally (if you haven't done it before) npm i -g nodemon
Add the following to the .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug App_Name",
"skipFiles": [
"./path/of/file/to/skip/when/debugging"
],
"program": "app.js",
"restart": true,
"runtimeExecutable": "nodemon",
"console": "integratedTerminal"
}
]
}
We, of course, can still install nodemon locally and run it while developing.
What worked for me without global installs and using typescript:
{
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"name": "nodemon",
"program": "${workspaceFolder}/src/index.ts",
"request": "launch",
"restart": true,
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
"type": "pwa-node",
"args": ["--config", "nodemon.json"] //remove --config if you don't have one
}
In order to don't have problems with ts-node, in nodemon.json I added it:
{
"execMap": {
"ts": "npx ts-node"
}
}
No, currently it can't. But I managed to get this somewhat working using nodemon. I start it from Grunt . But an equivalent command line should do the same.
EDIT: After an evening of testing I can say that below approach is still somewhat flakey :S, attaching fails intermittedly and sometimes breakpoints are ignored.
EDIT2: You can also specify an non default debug port in Gruntfile using ['--debug-brk=5860'] for nodeArgs. I've been also advised to use --debug-brk instead of --debug. Perhaps this will remove the current flakeyness. I'll come back and mention here if it helps (I've currently switched project).
In case this might help anyone it's working with below settings in Current VS Code version (e.g. v0.10.6) on Windows 10. But it'll probably work on Mac too (I might check later). But note that I sometimes have to trigger a rebuild by changing+saving a file before the debugger picks it up.
/.vscode/launch.json
{
"configurations": [{
"name": "Launch",
"outDir": null
},{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}]
}
/Gruntfile.js
nodemon : {
dev : {
script : 'launcher.js'
},
options : {
ignore : ['node_modules/**', 'Gruntfile.js'],
nodeArgs: ['--debug'],
env : { PORT : '4123'
}
}
}
I guess the debug port 5858 is the default since it's not specified here (note it ís in launch.json above.)
https://github.com/Microsoft/vscode-recipes/tree/master/nodemon
The above link helped me to successfully debug nodemon + express app. The steps are well explained there.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector",
}
]
}
npm script
"dev-server": "nodemon ***--inspect*** server.js"
Steps:
Run the server, using npm script. Please note --inspect arg in
the script
Start visual code debugger, A prompt will be shown to
select the node server process
select the node server process
Now you should be able to debug.
if it did not help you, then please have a look at the official doc, the config options are explained there.
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools
This will let you run it on the file currently open in the editor WITHOUT installing nodemon as a dependency. This makes it convenient to keep in a template project.
The cwd and program are set so that the working directory is the one containing the file, and the program is the filename without a path. This makes it compatible with monorepos because it will then search back up the file tree for the correct tsconfig.json, package.json, node_modules, etc.
E.g. if the currently opened file is /path/to/some-file.ts, this is equivalent to running in the shell like:
cd /path/to
npx -y nodemon some-file.ts
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "npx",
"runtimeArgs": ["-y", "nodemon"],
"program": "${file}",
"cwd": "${fileDirname}",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Yes you can! As of a recent update you can attach the debugger to a running Nodemon process. This page has more information. Search for nodemon on the page to see the instructions.
I use the Node Exec plugin. It allows you to run and stop a node app in vcs by pressing F8 and F9 (applies on open file in editor). This could help as a (temporary) workaround.
Nodemon as local dependency
I also could not get #Adrian T's answer to work right away. But it is only a small detail, that has to be changed to make it work. So here we go:
create a launch.json file in a top-level .vscode folder
open the file in VS Code
use the build in button Add Configuration - that will be rendered in the editor - to add a config for Node.js: Nodemon Setup
in the generated config change the key runtimeExecutable:
"program": "${workspaceFolder}/app.js",
// diff from Adrian T
-- "runtimeExecutable": "${workspaceFolder}/node_modules/nodemon/bin/nodemon.js",
++ "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
You are now using the executables from your local dependencies (see this SO thread)
There is also an answer by Martin from earlier underneath this answer (just to be correct):
If you don't like having to run a global nodemon you can also install nodemon using npm and then set "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon", – Martin Feb 22 '18 at 22:25
Nodemon as global dependency
"runtimeExecutable": "nodemon", will only work if the executable of nodemon itself is part of the environment variable PATH (not `%appdata% or the like thereof). As this is mostly not the case, you would need to specify the absolute path (see the docs here and here).
For anyone trying to set up nodemon with an express-generator created ExpressJS project on windows, this is what worked for me when nodemon is installed as a local dev dependency (e.g. npm install nodemon --save-dev)
{
"type": "node",
"request": "launch",
"name": "Launch with Nodemon",
"runtimeExecutable": "node",
"runtimeArgs": ["${workspaceFolder}/node_modules/nodemon/bin/nodemon.js"],
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\bin\\www",
"env" : {
"DEBUG": "myapp:server"
}
}
No need to do anything,
Just open Powershell as administrator and write
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
and then enter A
1. Install nodemon as a dev dependency.
npm install -D -E nodemon
Options:
-D option: To save as dev dependency
-E option: To install exact version
2. Add a nodemon.json file in the root of the project with the following content.
{
"restartable": "rs",
"ignore": [".git", "node_modules/**/node_modules"],
"verbose": true,
"execMap": {
"js": "node --harmony"
},
"watch": ["src/", ".env"],
"env": {
"NODE_ENV": "development"
},
"ext": "js,json",
"delay": 500
}
For more information, see the official documentation here.
3. Add a script to package.json.
npm pkg set scripts.dev="nodemon --config nodemon.json"
4. Add launch config in .vscode/launch.json.
Content:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Run Nodemon",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"],
"envFile": "${workspaceFolder}/.env",
}
]
}
To see documentation here.
The envFile option is optional. I use it because I am using dotenv.
It works fine for me, in the main Terminal.
Do not use VS code terminal, use the main system terminal.

vscode debug ES6 application

I have VSCode 0.5.0. I set the compilerOptions flag to "ES6" and the editor started recognizing my ES6 code as correct.
I have babel installed.
My Mocha tests use the babel compilers and my tests pass.
My app runs from the command line with no problems when I launch it with babel-node .
When I debug the app from within VSCode, it starts up without the ES6 support, and the app fails for ES6 syntax issues.
Are there debug settings that I missed turning on?
Here's how to get VSCode debugger to work with Babel 6+:
First install dependencies locally:
$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save
Then run babel-node:
$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
By default, the debugger will listen on port 5858, so make sure the port matches in launch.json for Attach configuration:
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858
}
Now attach the debugger in VSCode:
make sure debug configuration is set to Attach and not Launch
run with F5
Nodemon
Although not required, if you also want to use nodemon to pickup code changes without restarting the server, you can do this:
Make sure nodemon is installed:
$ npm install nodemon --save-dev
Run the server
$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect
Finally, attach the debugger as shown above.
Assuming you have babel-cli installed as a local module in your project the following should work.
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
"stopOnEntry": false,
"args": [
"${workspaceRoot}/server.js"
],
...
You can try babel-register (you'll also need other companion babel modules as req'd):
npm install --save-dev babel-register
with a launch.json configuration along these lines:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": true,
"outFiles": [
]
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"address": "localhost",
"restart": false,
"sourceMaps": false,
"outFiles": [],
"localRoot": "${workspaceRoot}",
"remoteRoot": null
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command.PickProcess}",
"port": 5858,
"sourceMaps": false,
"outFiles": []
}
]
}
This is loosely based on vscode-debug-nodejs-es6 with the addition of the babel-register runtime argument.
By default VSCode launches node just with a --debug-brk option. This is not enough to enable ES6 support. If you can find out what options 'babel-node' passes to node, you could specify the same options in the VSCode launch config (through the runtimeArgs attribute). But this does not solve the issue that babel-node transpiles your ES6 code before running it.
Alternatively you could try to set the 'runtimeExecutable' in your launch config to 'babel-node'. This approach works with other node wrappers, but I haven't verified that is works with babel-node.
A third option (which should work) is to use the attach mode of VSCode: for this launch babel-node from the command line with the '--debug' option. It should print a port number. Then create an 'attach' launch config in VSCode with that port.
babel + nodemon
In the VS Code Terminal, launch your server with the --inspect argument:
nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js
Among the other lines, one will show the port on which the debugger is listening:
...
Debugger listening on port 9229
...
Create the following debug configuration:
{
"type": "node",
"request": "attach",
"name": "Attach to Port",
"address": "localhost",
"port": 9229
}
Launch the debugger, and if everything went fine you will see in the output Terminal:
Debugger attached.
From now on, you can debug your application.
There are two ways of doing it:
First Option using npm command prompt
In package.json file create build command that will execute babel
{
"scripts": {
"build": "babel src --out-dir dist --watch --source-maps"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-preset-es2015-node6": "^0.4.0",
"eslint": "^3.16.0"
}
}
In launch.json Enter following code:
{
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"--nolazy"
],
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
]
}
]
}
Open your cmd window, navigate to your package.json file and execute:
npm run build
Open your VS Code and run your code. It will run and it will stop at all your breakpoints. The reason it works because source maps are generated and VS knows how to map them to your code.
Second option using VS Code task:
In VS Code add following task (Ctrl + Shift + P) and type 'Tasks: Configure Task Runner':
Add following code to tasks.json file
{
"version": "0.1.0",
"command": "${workspaceRoot}/node_modules/.bin/babel",
"isShellCommand": true,
"tasks": [
{
"taskName": "watch",
"args": [
"src",
"--out-dir",
"dist",
"--watch",
"--source-maps"
],
"suppressTaskName": true,
"isBuildCommand": true
}
]
}
Now execute task, but pressing Ctrl + Shift + B (build command) and now you can run and debug your code. VS Code doing the same as what npm is doing in step one.
You will also need to configure babel in .babelrc (located in the root of the project) file like this:
{
"presets": [
"es2015-node6"
]
}
and jsconfig.json (located in the root of the project)
{
"compilerOptions": {
"target": "ES6"
},
"include": [
"src/**/*"
]
}
This is my configuration and it works great! I am using the VSCode debugging, mocha 6.1.4, node: v8.16.0, and Babel version 6.
Make sure to load babel-register and babel-polyfill in runtimeArgs, or else you will get regeneratorRuntime is not defined!
{
"type": "node",
"request": "launch",
"name": "Mocha test debug",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"protocol": "inspector",
"stopOnEntry": false,
"runtimeArgs": [
"--nolazy",
"--require",
"babel-register",
"--require",
"babel-polyfill",
"tests/*.js"
],
"sourceMaps": true
}
babel-node & vs code attach
config a npm script in package.json:
"scripts": {
"debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}
add vs code debug configuration:
{
"name": "Attach",
"type": "node",
"protocol": "legacy",
"request": "attach",
"port": 5858
}
When transpiling with bael-node, you should add "--inspect-brk" in the script, so that the script may break when a breakpoint is hit.
Ex:
"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"
Now when you run using npm run start, debugger will be launched and you can see following in your console:
Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724
For help see https://nodejs.org/en/docs/inspector
That shows debugging process has started and we can attach to it on port# 9229.
Now, you need to add the following debugger config for vs-code to attach to this process: (in launch.json)
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"port": 9229
}
]
}
After saving, click the "start debugging" button, to attach to process initiated by node earlier. You may read more about this here

Resources