如何使用 Edge 浏览器在 VSCode 中调试 Angular 应用程序？ -跟进

Question

How to debug Angular application in VSCode using Edge browser? 我已经尝试过这里的建议，但都不起作用。 我本来想对最后一个答案发表评论，但我没有 50 名声望这样做，而且回答问题是不礼貌的，所以我在这里问另一个问题。

上述主题中的两个launch.json 建议不起作用，“Debugger for Edge”中自动生成的launch.json 也不起作用。 我分别尝试了它们无济于事（见下文）

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost(Debugger for Edge)",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug edge (Answer 1 from topic, I removed the things about Chrome was I wouldn't use that browser)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceFolder}/protractor.conf.js"]
        }
    ]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Edge (Answer 2 from topic)",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "trace": true,
            "userDataDir": "${workspaceRoot}/.vscode/edge"
        }
    ]
}

浏览器启动并显示页面（应用程序），但未命中断点。在 VSCode 中，红点变为空心圆。

上面的 launch.json 应该在单独的代码块中，但编辑器不允许我使用

 标签。

Answer 1

首先，请检查您的 VSCode 版本，我的 VSCode 版本如下：

还有，我的 Angular 版本：Angular 7.1.4。

要调试客户端 Angular 代码，我们需要先安装 Debugger for Edge Extension。

在 VSCode 上，点击查看菜单，选择扩展选项，检查是否已经安装了 Debugger for Edge 扩展，并且已经启用。然后，按 Reload 重启 VS Code 并激活扩展。

在 typescript 类中设置断点后，进入 Debug 视图并添加调试配置：

保存更改并选择调试环境后，可以按F5调试代码，如下所示：

参考：Using Angular in Visual Studio Code