angular - 如何使用 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 View ，添加debug配置:

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

引用:Using Angular in Visual Studio Code