Javascript Visual studio代码调试器从源映射的内联内容为文件提供服务

我正试图从VisualStudioCOD调试我的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进程后，断点不会被命中。该控件转到源映射中内联内容提供的只读文件。正在附加下面的快照

---

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

您如何构建和服务您的代码？此消息通常意味着VS代码无法找到源映射要求其查看的源文件

根据您提供的配置，我建议检查

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
    }
  ]
}

---

我也一直在努力解决这个问题，由于Github的问题，我使它能够正常工作：

实际上，我的情况与Angular应用程序无关，而是通过Laravel Mix启动的Vue.js应用程序，我尝试使用VSCode对其进行调试

我的launch.json终于成功了：

{
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“铬”，
“请求”：“启动”，
“名称”：“vuejs:chrome”，
“url”：”http://localhost:8080",
“源地图”：正确，
“webRoot”：“${workspaceFolder}/resources/assets/js”，
“Breaknload”：没错，
“sourceMapPathOverrides”：{
"webpack:///./*“：“${webRoot}/*”
}
}
]
}