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

【问题标题】：Visual studio code debugger serving file from inline content from source mapVisual Studio 代码调试器从源映射的内联内容提供文件
【发布时间】：2018-09-04 10:05:13
【问题描述】：

我正在尝试从 Visual Studio cod 调试我的 Angular 代码。已安装插件 Debugger for 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 进程后，不会命中断点。控件转到从源映射中的内联内容提供的只读文件。附上下面的快照。

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

【问题讨论】：

标签： javascript typescript debugging visual-studio-code

【解决方案1】：

我也一直在努力解决这个问题，并且感谢这个 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}/*" } } ] }

【讨论】：

【解决方案2】：

您如何构建和提供代码？此消息通常意味着 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
    }
  ]
}

【讨论】：