Debugging in VSCode with a npm script

Question

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.

Ben · Accepted Answer · 2022-04-23 13:14:54Z

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

Collectives™ on Stack Overflow

Debugging in VSCode with a npm script

1 Answer 1

Using a NPM script

Launching node directly

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using a NPM script

Launching node directly

Comments

Your Answer

Sign up or log in

Post as a guest

Related