未绑定断点-角度、VS代码、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代码，但不能安装特定的版本，等等。

发射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的应用程序发生。在任意位置设置断点并获取“未绑定断点”
• 在启动Chrome和连接Chrome（在调试模式下）时发生
• 不适用于非PWA标准角度应用程序-我可以调试非PWA标准角度应用程序
• 以（本地）管理员或受限用户身份登录Windows时发生。没什么区别

研究和我所尝试的：

• 我的情况与此不同：未绑定断点与代码| Chrome | Angular。我的是PWA，当以“ng serve”开头时，我总是有一个未绑定的断点

Answer 1

您是否可以通过以下方式进行调试：

// ... code    
debugger
// ... code

，在你的代码里？

Answer 2

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

"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-配置

VS代码使用一个名为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}"
        }  
    ]  
}