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

Question

我正在尝试从visual studio cod调试我的角度代码。安装了适用于chrome的插件Debugger，并添加了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代码无法找到源映射告诉它的源文件。

根据您提供的配置，我建议您检查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
    }
  ]
}

Answer 2

我也一直在努力解决这个问题，这要感谢Github的问题：

https://github.com/angular/angular-cli/issues/2453

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

我的launch.json终于起作用了：

Request.Form["txtToDate"]