如何在 VSCode 中调试运行“节点”的 javascript

Question

I am running my JS using 'node myscript.js'.

And I try to debug this in VSCode using 'Run->Start Debugging'

I create a workspace in VSCode and when I see it create a launch.js

{
    // 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": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

But the debugger fails with

Debugger listening on ws://127.0.0.1:55596/0b6425a4-e21c-47c2-a81d-bb8e43386246
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
Process exited with code 0

how can i get this to work?

I have tried all these configuration. But none of them hit the breakpoints I set. I do see the console output from my Console.log in the terminal.

{
    // 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": "0.2.0",
    "configurations": [
        {
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        },
        {
            "name": "Launch via NPM",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        },
        {
            "command": "npm start",
            "name": "Run npm start",
            "request": "launch",
            "type": "node-terminal"
        },
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]

Answer 1

Using the pwa-chrome type for launching will try and launch your code in a web browser and run it, that doesn't run node at all so seems to be the wrong approach for your needs and hitting break points that way is more complex. I would suggest going with a simple pwa-node type of launch instead as hitting break points is nice and easy.

Your first step is to read through the node debugging instructions for vscode: https://code.visualstudio.com/docs/nodejs/nodejs-debugging

In the above instructions it suggests using the launch type node but more recent instructions suggest using pwa-node (see here: What is the pwa-node type launch configuration on VSCode? ).

A simple .vscode/launch.json file to debug a node application that is launched via index.js :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch my Node programme",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "program": "index.js",
      "args": [
        "command-line-arguments",
        "go-here",
      ]
    }
  ]
}

Once you have the launcher you can set a break point in your js and then hit the debug button.

Details of the launch configuration attributes can be found here: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes