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终于奏效了：

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "sourceMaps": true, "webRoot": "${workspaceFolder}/resources/assets/js", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" } } ] }