很抱歉,如果这是重复的,但是我查看了已经发布的许多答案,但仍然找不到解决方案。
我正在处理一个旧的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 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
的“已加载脚本”下列出。但是,当我在VS Code中打开这些编号的脚本中的任何一个(而不是通过打断点)时,我看到的是生成的Javascript,而不是映射的Typescript。
答案 0 :(得分:0)
已解决。它可以在以下(更简单)的配置下正常工作:
"webRoot": "${workspaceFolder}/",
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*"
}