javascript - Visual Studio 代码调试器从源映射中的内联内容提供文件

Question

我正在尝试从 visual studio cod 调试我的 Angular 代码。已经为 chrome 安装了插件调试器，并添加了 Google Chrome 中将调试器附加到进程所需的所有配置。

下面是launch.json文件中的配置。

 "version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "url":"http://localhost:4200*",
        "webRoot": "${workspaceFolder}"
    },
    {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "program": "${workspaceFolder}\\serve"
    }
]

将其附加到 chrome 进程后，断点未命中。控件转到从源映射中的内联内容提供的只读文件。附上下面的快照。

如果我遗漏了什么，请告诉我。我真的需要让它工作。

Answer 1

您如何构建和提供代码？此消息通常意味着 VS Code 无法在源映射告诉它查找的位置找到你的源文件。

根据您提供的配置，我建议检查 webRoot 的值。它应该是您构建的文件实际所在的目录。因此，如果您的代码编译到一个 build 文件夹，那么您的 webRoot 应该是 "${workspaceFolder}/build"。

例如，如果我有一个如下所示的工作区:

src/
  test.ts
build/
  index.html
  test.js
  test.js.map

然后下面的 launch.json 配置对我有用:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/build",
      "sourceMaps": true
    }
  ]
}