未绑定断点 - 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 的普通 Angular 应用程序中。在任意位置设置断点并获得“未绑定断点”。
• 启动 Chrome以及附加到 Chrome（在调试模式下）时发生。
• 对于非 PWA 普通角度应用程序不会发生- 我可以调试非 PWA 普通角度应用程序。
• 以（本地）管理员或受限管理员身份登录 Windows 时发生。没有不同。

研究和我尝试过的：

• 我的情况与此不同：未绑定断点 - VS Code | 铬 | 有角的。我的是 PWA，当我从“ngserve”开始时总是有一个未绑定的断点。
• 尝试更改 angular.json: "sourceMap": true - 没有效果
• 尝试“运行 -> 禁用所有断点，然后启用所有断点” - 没有效果
• 尝试将 VS Code 降级到 1.52.1（上次调试有效时）- 没有效果
• 尝试添加到 webpack: devtoolModuleFilenameTemplate: '[absolute-resource-path]' - 没有效果
• 尝试禁用除 C​​hrome 和 JS 调试器之外的所有扩展 - 没有效果
• 尝试在调试模式下附加到 Chrome - 仍然不会遇到断点

Answer 1

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

"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. 确保该文件具有正确的配置。以下是示例配置。调整应用程序的详细信息（确保使用debug-my-pwa-appVS Code 中的启动/调试配置）

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