带有 Chrome 调试器的 Visual Studio Code 中的未验证断点答案

【问题标题】：Unverified breakpoint in Visual Studio Code with Chrome Debugger带有 Chrome 调试器的 Visual Studio Code 中的未验证断点
【发布时间】：2019-09-30 13:27:11
【问题描述】：

对不起，如果这是重复的，但我已经查看了许多已经发布的答案，但我仍然找不到解决方案。

我正在开发一个已部分转换为 Typescript 的遗留 AngularJS 应用程序。来源在C:\Users\myname\dev\project\client\src。这是我的launch.json 条目：

{
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "url": "http://localhost:3000/#/home",
    "webRoot": "${workspaceFolder}/client/src",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
    },
    "trace": true

}

当我尝试在 VS Code 中设置断点时，它显示“未验证断点”。此操作的跟踪文件中的典型日志如下所示：

[13:43:13.020 UTC] From client: setBreakpoints({"source":{"name":"some-page.controller.ts","path":"C:\\Users\\username\\dev\\project\\client\\src\\some-subfolder\\some-page.controller.ts"},"lines":[77],"breakpoints":[{"line":77}],"sourceModified":false})
[13:43:13.020 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@518a41c1fa7ce1c8bb5e22346e82e42b4d76a96f","Versions.Target.UserAgent":"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36","Versions.Target.V8":"7.4.288.26","Versions.Target.Project":"Chrome","Versions.Target.Version":"74.0.3729.131","fileExt":".ts"}}}
[13:43:13.020 UTC] To client: {"seq":0,"type":"response","request_seq":34,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"verified":false,"line":77,"message":"Breakpoint ignored because generated code not found (source map problem?).","id":1006}]}}

Chrome DevTools 能够在 webpack://client/src/some-subfolder\\some-page.controller.ts 找到源映射，并且它正确设置了断点。当这个断点被命中时，VS Code 会加载一个它标识为C:\Users\username\dev\project\client\src\client\src\some-subfolder\some-page.controller.ts 的文件。路径的\client\src 部分重复，但此位置不存在。

如果我随后在路径无效的文件中的 VS Code 中设置断点，则它可以工作，并且应用程序在遇到它时会中断。当然，我无法对任何其他文件执行此操作，因为 VS Code 认为它找到它的路径不存在。

我尝试了webRoot 和sourceMapPathOverrides 的各种组合，但均未成功，并且我已确保在项目文件夹中启动了 VS Code。任何人都可以提出解决方案吗？

编辑我也尝试删除 sourceMapPathOverrides 条目但没有成功。当我在 DevTools 中设置断点时，VS Code 将文件识别为 1521，它列在 webpack-internal 的 Loaded Scripts 下。但是当我在 VS Code 中打开任何这些编号的脚本时（而不是通过打断点），我看到的是生成的 Javascript，而不是映射的 Typescript。

【问题讨论】：

标签： angularjs debugging visual-studio-code

【解决方案1】：

解决了。它适用于以下（更简单的）配置：

"webRoot": "${workspaceFolder}/",
"sourceMapPathOverrides": {
    "webpack:///*": "${webRoot}/*"
}

【讨论】：