Launch config for yarn in VSCode? - node.js

I'm trying to add a launch config to VSCode for local debugging. Our command line is
yarn dev (which in package.json is
"dev": "ENV_FILE=./config/.env.dev ts-node -r tsconfig-paths/register ./src/app.ts",
and runs fine)
I've added this launch config in VSCode:
{
"name": "Launch via yarn",
"outFiles": [
"${workspaceFolder}/dist/**/*.js",
"!**/node_modules/**"
],
"runtimeExecutable": "yarn",
"runtimeArgs": ["dev"],
"request": "launch",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
and it just exits with this in the debug console:
/usr/local/bin/yarn dev
Process exited with code 1
(it also errored out before when I had another process already running, so it couldn't listen on the port. But that's not the case now. And when that was failing, also no real output [while yarn dev correctly told me it couldn't listen on the port])
It's weird that there's no output at all.
I suspect I'm missing something very obvious. (Relatively new to both node and VSCode)

Related

Debugging in VSCode with a npm script

In my package.json I have some scripts defined that look like this:
"scripts": {
"build": "tsc -p tsconfig.json",
"run": "node --experimental-specifier-resolution=node .",
"start": "npm run build && npm run run"
}
For now I just used npm run start from the terminal to compile and run everything but I want to use breakpoints now and would like to switch to the VSCode debugging.
I don't know what the launch.json configuration should look like to run scripts.
My project structure looks something like this:
.
├── package.json
├── src/
│ └── start.ts
└── dist/
└── start.js
What I think my best attempt so far was:
{
"name": "Launch via NPM",
"request": "launch",
"type": "node",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"start"
],
},
Which sadly gives me the following error:
Exception has occurred: Error: ENOENT: no such file or directory, stat '{cwd}\git.COM'
Replacing "runtimeArgs": ["run","start"], with "command": "npm run start", gives me the same error.
Using a NPM script
You could create an additional script in your package.json to launch node with the instruction to wait for a debugger to be attached. IMHO, this is not ideal and I would avoid it but it's sometimes necessary (for example when node is launched by some shell script):
"scripts": {
"debug": "npm run build && node --experimental-specifier-resolution=node --inspect-brk ."
}
Then you would need a configuration in your launch.json to attach the debugger to the waiting node process:
{
"name": "Attach",
"type": "node",
"request": "attach",
"skipFiles": ["<node_internals>/**"],
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
}
Launching node directly
Another possibility is to launch node in your launch.json with the appropriate arguments. There is a little code duplication with your package.json but that's how I do it myself.
Note that if you want to debug directly your TS files, you have to generate the source maps and indicate the location of the generated JS files.
Here is how it would look like:
{
"name": "Debug",
"type": "node",
"request": "launch",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}/src/start.ts",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"runtimeArgs": [
"--experimental-specifier-resolution=node"
]
}
To ensure your TS code is built, I would run TSC in watch mode in another terminal window:
tsc -p tsconfig.json --watch

Vscode breakpoints for TypeScript Mocha tests

I have started developing a Node/ExpreeJS project in TypeScript.
I should note that I am not running node directly. I am running node in a docker but I do not see any reason that this would be an issue.
I am using vscode as my editor and I am trying to configure a debug launch config for Mocha tests.
My launch configuration is
{
"type": "node",
"request": "launch",
"name": "SK - Mocha Tests",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "make",
"runtimeArgs": [
"test-brk"
],
"port": 9321,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"protocol": "inspector",
"sourceMaps": true,
}
The make test-brk command simply maps to a docker exec command that executes npm run test-brk within the container.
My package.json contains this script definition for test-brk
"test-brk": "mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9222 --debug-brk --exit test/**/*.spec.ts"
Running the SK - Mocha Tests debug task from vscode launches Mocha and runs the tests as expected.
The inspect server is started and the vscode debugger successfully connects as can be seen in the output below.
$ cd /home/andrew/workspace/service-kit/sk-base-nodejs ; /usr/bin/make test-brk
(docker exec node npm run test-brk)
> sk-base-nodejs#0.0.1 test-brk /workspace
> mocha --require source-map-support/register --require node_modules/ts-node/register --inspect-brk=0.0.0.0:9321 --debug-brk --exit test/**/*.spec.ts
Debugger listening on ws://0.0.0.0:9321/d696c7a4-c4e1-4212-af85-ab1675856a7a
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
HTTP server listening on port 8080
Hello World
✓ should return 200 and Hello World
1 passing (34ms)
Waiting for the debugger to disconnect...
However breakpoints are not being hit.
I have set in both the application TS source and the test TS source.
When the tests are running the breakpoints grey out and show
Breakpoint ignored because generated code not found (source map problem?)
I understand that this is a source map issue between the source TS and the JS being executed for the tests.
As above I am using ts-node with Mocha there seems to be a problem because ts-node does not generate source map files for vscode to read.
This is described in ts-node/issues/46 however there is no solution in that issue. It ultimately links to vscode-chrome-debug-core/issues/533 which reports that it is fixed in a previous release of vscode.
There is also vscode/issues/3144 which suggests transpiling the TS tests into JS and then executing the JS.. but this doesn't allow debugging the source TS.
I would greatly appreciate any input to point me in the right direction.
I was able to get it to work with the following launch configuration:
{
"name": "Run Mocha",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [
"--no-timeouts",
"--require",
"ts-node/register",
"${workspaceRoot}/src/**/*.spec.ts"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
I also had to set module as commonjs in my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
}
}
Here's an example repo with all the files setup correctly
Further Reading
Issue with mocha test debugging from typescript
Running Mocha with TypeScript

How to debug nodeJS (ExpressJS) app in visual studio code?

I have tried many different solutions available online but nothing works in my case,
I am trying to debug a nodeJS app while its running, invoking the API through UI/postman
My launch.json: took guide from here
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId": "${command:PickProcess}",
"skipFiles": [
"<node_internals>/**"
]
}
After starting local server, when I start debugger, it ask to pick a process, I select the one ending with --exec babel-node server.js it attaches successfully but deosn't load my project scripts, only node_modules, eval and node_internal.
In my code if I put break point, I see this error "Break point set but not yet bound"
My package.json start sctipt:
"scripts": {
"start": "nodemon --exec babel-node server.js"
}
My code is in ES6, I start the server though a shell script which first set some environment then do npm start
My .bablerc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
Here is my launch.json and I run nodejs with express and it work fine.
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js",
"args": ["--env","local"]
}
]
}
Turns out I was picking wrong process ID.
When we start the debugger, it shows us the list of running processes to select with which debugger will be attached.
I picked the one ending with _babel-node server.js instead of --exec babel-node server.js. Doing this loaded all my script and started working as expected.

Connection refused when trying to debug nodejs application that requires babel/register

So this is my launch.json file
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "se",
"runtimeArgs": [
"--require",
"#babel/register",
"${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
And when I click on run without debugging, application starts normally.
This is the command, that visual studio code ran: /usr/bin/node --require #babel/register /home/golobitch/progs/se
But when I click on Start debugging, it runs following command: /usr/bin/node --require #babel/register /home/tadejgolobic/progs/auth --inspect-brk=44800 and after 10s, I get error window, saying that "Cannot connect to runtime process timeout after 10000ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:44800)."
If I run above command in the terminal, program will start, but debugger will not. But if I reorder parameters, and write --inspect-brk immediately after /usr/bin/node then debugger will start, but the program will not (probably the same issue as in VSC, but I do not get any error).
So my question is, how to configure it, that debug will work?

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