Visual Studio Code - Node debugger breakpoints not

问题:

I am trying to use VSCode to debug a node app I am running.

I launch the app in a separate terminal and then use the attach to process configuration to hook into it.

The attaching works correctly and I get a side panel that says 'loaded scripts' with the files in my project. If I click on one of those and set breakpoints there it will work correctly.

If I set a breakpoint on a file I open through the VSCode editor the breakpoint is greyed out and when I hover over it will say 'Breakpoint set but not yet bound'.

How can I make it so that the breakpoints I set on the code are bound?

回答1:

Try this configuration in your launch file:

{
    "name": "Attach to Process",
    "type": "node",
    "protocol": "inspector",
    "request": "attach",
    "stopOnEntry": false,
    "port": 5858,
    "localRoot": "${workspaceRoot}",
    "remoteRoot": "/somepath/myprojectroot",
    "sourceMaps": true
}

Make sure the remoteRoot is correct path, otherwise it won't know where to look for the source files.

回答2:

The plain truth is that VSCode 1.20 does not allow you to hit breakpoints.

I tried 1.21 too, it also does not let you do it.

I went back to 1.18 and it works just as expected, no problem.

回答3:

Hi I have the same problem, and I fix it with adding to

"webRoot": "${workspaceFolder}",

my folder which contains the code

"webRoot": "${workspaceFolder}/src",

The full launch.json

{
  // 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": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "trace": true
    }
  ]
}

回答4:

For me, just adding "localRoot": "${workspaceFolder}" to my default launch.json Configuration did the trick.

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/bin/www",
    "localRoot": "${workspaceFolder}"
}

回答5:

I faced the same issue...
After i try a lot of launch config combinations, i found the correctly.

{
  "type": "node",
  "request": "attach",
  "name": "Attach Program",
  "protocol": "inspector",
  "restart": true,
  "skipFiles": [
    "<node_internals>/**"
  ],
  "localRoot": "${workspaceFolder}",
  "remoteRoot": "/",
}

Ps: I'm launch node script with nodemon using the --inspect parameter (that allow debugger to attach node).

回答6:

I have a TypeScript project, which suddenly didn't hit breakpoints anymore. In my case I had to move the project folder out of my iCloud Drive folder. There were other indicators that this path wasn’t ok, like missing git gutter indicators, as well. Here is my debug launch config. Breakpoints placed in app.ts are being hit.

  {
    "type": "node",
    "request": "launch",
    "name": "Debug",
    "program": "${workspaceFolder}/src/app.ts",
    "sourceMaps": true,
    "protocol": "inspector",
    "cwd": "${workspaceFolder}",
    "outFiles": [
      "${workspaceFolder}/dist/**/*.js"
    ]
  }

回答7:

To hit breakpoints you need to compile in debug mode. So when compiling the code using your tasks.json have debug flags enabled in your command attribute. C++ example :

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile Test",
      "type": "shell",
      "command": "g++ -g test.cpp",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
      },
      "group": "build",
    }
  ]
}

I am talking about the -g flag in the "command": "g++ -g test.cpp",