How to debug Typescript code in Visual Studio Code with ts-node-dev and correct line numbers - node.js

I have a Typescript project that is launched as follows:
ts-node-dev --preserve-symlinks --inspect=0.0.0.0 -- src/server.ts
I can debug it with Visual Studio Code, but the debugger breaks at the wrong lines. The only reasonable explanation I can think of, is that ts-node-dev does not point the debugger to the source maps (which are there).
How can I correctly debug Typescript code executed by ts-node-dev?

Configuration for debugging in vs code with ts-node-dev to attach and launch debugger:
package.json:
{
"scripts": {
"dev:debug": "ts-node-dev --transpile-only --respawn --inspect=4321 --project tsconfig.dev.json src/server.ts",
"dev": "ts-node-dev --transpile-only --respawn --project tsconfig.dev.json src/server.ts",
}
}
launch.json:
{
"version": "0.1.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to dev:debug",
"protocol": "inspector",
"port": 4321,
"restart": true,
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Debug",
"protocol": "inspector",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"]
}
]
}

I had the same question, which brought me to this (old) post. I found the solution to my problem at https://gist.github.com/cecilemuller/2963155d0f249c1544289b78a1cdd695 so am posting it here in case anyone else finds themselves here!
This VS Code configuration allowed me to stop at breakpoints on the correct lines in my TypeScript code:
{
"version": "0.2.0",
"configurations": [
{
"name": "Example",
"type": "node",
"request": "launch",
"runtimeExecutable": "node",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
"args": ["src/script.ts", "--example", "hello"],
"cwd": "${workspaceRoot}",
"internalConsoleOptions": "openOnSessionStart",
"skipFiles": ["<node_internals>/**", "node_modules/**"]
}
]
}

This is what worked for me. attach type debugger was not working for me but launch type is working fine. Breakpoints works as well even though sometimes it goes to the ts-node-dev source files and I guess we can't do anything about it.
It runs tsnd which is just the alias for ts-node-dev.
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"name": "launch",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsnd",
"program": "${file}",
"args": [
"--transpile-only",
"--respawn",
"--project",
"tsconfig.dev.json",
],
"skipFiles": [
"<node_internals>/**"
],
},
}
"program" could be changed to run a specific file by replacing ${file} with that filename but with the above config, it will run the opened file with the debugger.

Related

How to pass arguments to node script from launch configuration in vscode

Why isn't my launch configuration in vscode picking up on args key?
vscode Version: 1.63.2
launch.json
"version": "0.2.0",
"configurations": [
{
"command": "node ${workspaceFolder}/test.js",
"args": ["foo"],
"name": "test",
"request": "launch",
"type": "node-terminal",
},
]
}
test.js
console.log("running script");
console.log(process.argv);
I press play from debug sidebar and get this in console:
$ node /Users/acohen/mp/mobileapp-client-tests/test.js
Debugger attached.
running script
[
'/Users/acohen/.nvm/versions/node/v12.16.2/bin/node',
'/Users/acohen/mp/mobileapp-client-tests/test.js'
]
Waiting for the debugger to disconnect...
Why isn't "foo" passed as an argument?
Here is a config example that worked for me:
{
"configurations": [
{
"name": "Launch Program",
"args": ["foo"],
"program": "${workspaceFolder}/test.js",
"request": "launch",
"type": "pwa-node"
}
]
}
Ok, what I ultimately wanted to do was run a complex npm script and debug it. I re-installed vscode, and found some good docs here:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools
and here for using nvm:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_multi-version-support
My launch.json looks like this:
where test_ios is the npm script to debug and 14.17.3 is the version of node (installed with nvm) to use:
"version": "0.2.0",
"configurations": [
{
"name": "Launch via npm",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "test_ios"],
"runtimeVersion": "14.17.3"
}
]
}

vscode How to change `package scripts` to` launch debug`?

package.json
"scripts": {
"start": "node -r dotenv/config index.js dotenv_config_path=.env",
.vscode\launch.json
{
// https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "debug",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\index.js",
"args": ["-r dotenv/config index.js dotenv_config_path=.env"]
}
]
}
I want to debug, but he can't work, How do I configure launch.json?
Please check Add Configuration button on lower right corner of launch.json.
Sample npm task configuration generated from same:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229
}
Screenshot:
Adding additional configuration:

Debugging doesn't work in Visual Studio Code 1.19.3

I want to use Visual Studio for developing an Node.js application with Typescript and simply want the normal debug behavior of any modern IDE: Debug code, set breakpoints, look into vars etc. Following the official documentation guide, I get an error when running the task: The npm task typescript didn't contribute a task for the following configuration.
So instead I invoke a custom npm script in the tasks.json file:
launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"preLaunchTask": "typescript"
}
]
task.json
"tasks": [
{
"type": "shell",
"label": "typescript",
"command": "cd server; npm run build:live"
},
]
package.json
"scripts": {
"build:live": "nodemon --inspect --exec ./node_modules/.bin/ts-node -- ./index.ts"
}
Now the app is comping and starting (also with live reloading) fine. But NO debugging works, no breakpoint was reached. Is it really that hard to debug Typescript in VS Code?
I'm using the latest
Live debugging seems to be a pain on Typescript in VS Code. I could only make regular debugging working in a similar way to the full Visual Studio:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.ts",
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"sourceMaps": true,
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"internalConsoleOptions": "openOnFirstSessionStart",
"preLaunchTask": "compile",
"name": "DEBUG"
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "compile",
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Please note that you've to set "sourceMap": "true" in tsconfig.json. When not, an error occurs that corresponding source maps aren't found. This is cause NodeJS isn't able to compile TS. Compiling is done by the TypeScript compiler tscbefore. For debugging purpose (e.g. reach breakpoints) the source maps can map the compiled js to the ts source file here.

How can I make VSCode run a node app like "npm start"?

I have a node app with the package.json like so:
{
"name": "myexpressapp",
"version": "0.0.99",
"scripts": {
"start": "node ./bin/www" },
//etc
}
and in app.js I have
console.log ("Running version: "+process.env.npm_package_version);
When I run npm start in the command prompt this logs
Running version: 0.0.99
When I start (press F5) in VS Code this logs
Running version: undefined
What change do I need to make to launch.json to start the app in VS Code as if I had entered npm start in the command prompt?
I can now get it to run (but not debug) using the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM#3",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"start"
],
"port": 5858,
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program#1",
"program": "app.js",
"cwd": "${workspaceRoot}"
}
]
}

visual studio code debuggin mocha is ignoring breakpoints

I am trying to debug mocha unit test in visual studio code. I followed this question and got this run configuration:
{
"name": "Run mocha",
"type": "node",
"program": "/usr/bin/mocha",
"stopOnEntry": false,
"args": ["testUtils.js"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"env": { "NODE_ENV": "development"}
},
It works. But it does not stop at breakpoints! If I run the file with a normal launch configuration, breakpoints are not ignored.
Any Idea what could be the reason for this?
This works for me, you need to point to _mocha. Using just mocha does not allow attaching breakpoints.
{
"name": "Debug mocha",
"type": "node",
"request": "launch",
"runtimeArgs": ["C:\\Users\\CS\\AppData\\Roaming\\npm\\node_modules\\mocha\\bin\\_mocha"],
"program": "${workspaceRoot}\\test.js",
"stopOnEntry": false,
"args": [
],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"env": {
"NODE_ENV": "development"
}
}
If you include the port and the "--debug-brk" argument, you should be able to debug mocha unit tests. I have the following setup in my launch.json file. I included the "--recursive" argument as well so mocha would run all tests in subfolders as well. With this configuration file, I just set my VS Code debugger to use the "Debug Mocha Test" configuration and I'm able to hit breakpoints in any of my test files.
{
// 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",
"program": "${workspaceRoot}/server.js",
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
},
{
"type": "node",
"request": "launch",
"name": "Debug Mocha Test",
"port": 5858,
"runtimeArgs": ["${workspaceRoot}/node_modules/mocha/bin/mocha"],
"cwd": "${workspaceRoot}",
"args": ["--recursive", "--debug-brk"]
}
]
}
You can verify the port mocha will use for debugging by running mocha --debug-brk

Resources