angular - 未绑定(bind)断点 - Angular、VS Code、Chrome、PWA

Question

版本:

Angular CLI: 11.2.11
Node: 14.16.0
VS Code: 1.59.0
Chrome: 92.0.4515.131 
Debugger for Chrome (Nightly): v2020.2.15300
JavaScript Debugger (Nightly): v2021.8.217
(No other VS Code extensions loaded)

环境
Windows 10 - 以受限用户身份运行。除了批准的软件外无法安装任何东西，这意味着我坚持使用上面的 Node 版本，我可以升级 VS Code，但不能安装特定版本等。
启动.json:

    {
        "name": "Launch PWA-Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:4200/",
        "webRoot": "${workspaceFolder}"
    },
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "webRoot": "${workspaceFolder}"
    }

如何，何时:

发生在配置为 PWA 的 vanilla Angular 应用程序中。设置一个
任何地方的断点并获得“未绑定(bind)的断点”。

发生时
启动 Chrome 和 附加到 Chrome 时(在 Debug模式下)。

是否 不是 发生在非 PWA vanilla angular 应用程序中 - 我可以调试非 PWA vanilla angular 应用程序。

以(本地)管理员身份登录 Windows 时发生 或 有限的。没有不同。

研究和我尝试过的:

我的情况与此不同:Unbound breakpoint - VS Code | Chrome | Angular .我的是 PWA，从“ng serve”开始时我总是有一个未绑定(bind)的断点。

尝试更改 angular.json:“sourceMap”:true - 无效

尝试“运行 -> 禁用所有断点，然后启用所有断点” - 无效

尝试将 VS Code 降级到 1.52.1(上次调试时) - 无效

尝试添加到 webpack: devtoolModuleFilenameTemplate: '[absolute-resource-path]' - 无效

尝试禁用所有扩展，Chrome 和 JS 调试器除外 - 无效

尝试在 Debug模式下附加到 Chrome - 仍然不会遇到断点

Answer 1

Angular 构建使用各种策略优化脚本。你应该禁用它。使用以下配置设置。关键是禁用构建优化和缩小。在调试 session 之后，您可以将它们恢复为原始值。

"sourceMap": true,
"buildOptimizer": false,
"optimization": false,
"serviceWorker": false

如果上述方法不起作用，请尝试此组合显式禁用每种资源类型的优化

"sourceMap": true,
"buildOptimizer": false,
"serviceWorker": false,
"optimization": { 
    "scripts": false,
    "styles": false,
    "fonts": false
}

进一步阅读: https://angular.io/guide/workspace-config#optimization-configuration
VS 代码配置
VS Code 使用了一个名为 launch.json 的文件。 .确保文件具有正确的配置。以下是示例配置。调整应用程序的详细信息(确保使用 VS 代码中的启动/调试配置 debug-my-pwa-app)

{  
    "version": "0.2.0",  
    "configurations": [  
        {  
            "type": "pwa-chrome",
            "request": "launch",
            "name": "debug-my-pwa-app",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }  
    ]  
}