Angularjs 使用Chrome调试器的Visual Studio代码中未验证的断点

Angularjs 使用Chrome调试器的Visual Studio代码中未验证的断点,angularjs,debugging,visual-studio-code,Angularjs,Debugging,Visual Studio Code,很抱歉,如果这是一个重复,但我已经看了许多答案已经张贴,我仍然无法找到解决办法 我正在开发一个遗留的AngularJS应用程序,该应用程序已部分转换为Typescript。源代码位于C:\Users\myname\dev\project\client\src中。这是我的launch.json条目: { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222,

很抱歉,如果这是一个重复,但我已经看了许多答案已经张贴,我仍然无法找到解决办法

我正在开发一个遗留的AngularJS应用程序,该应用程序已部分转换为Typescript。源代码位于
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代码中设置断点时,它会显示“未验证断点”。此操作的跟踪文件中的典型日志如下所示:

[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开发工具可以在
webpack://client/src/some-subfolder\\一些page.controller.ts
,它会正确设置断点。当点击此断点时,VS代码将加载一个文件,该文件标识为C:\Users\username\dev\project\client\src\client\src\some subfolder\some page.controller.ts。路径的
\client\src
部分重复,但此位置不存在

如果我在文件的VS代码中设置了一个断点,该断点的路径无效,那么它就会工作,当应用程序碰到它时就会中断。当然,我无法对任何其他文件执行此操作,因为VS代码认为找到它的路径不存在

我尝试了
webRoot
sourceMapPathOverrides
的各种组合,但都没有成功,而且我已经确保在项目文件夹中启动了VS代码。有人能提出解决办法吗

编辑
我还尝试删除
sourceMapPathOverrides
条目,但没有成功。当我点击DevTools中设置的断点时,VS代码将文件标识为1521,该文件列在webpack internal中加载的脚本下。但是当我在VS代码中打开这些编号的脚本时(而不是通过点击断点),我看到的是生成的Javascript,而不是映射的Typescript。

。它可以通过以下(更简单的)配置正常工作:

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