CODEWITHSUNDEEP
node.jstypescriptvisual-studio-codenpm-scripts
StrangeGirlMurph
StrangeGirlMurph

Reputation: 341

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'

error message

Replacing "runtimeArgs": ["run","start"], with "command": "npm run start", gives me the same error.

Upvotes: 2

Views: 4681

Answers (1)

Ben
Ben

Reputation: 1371

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

Upvotes: 2

Related Questions