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

Question

我正在使用Edge 扩展。以下是配置launch.json：

"configurations": [
    {
      "name": "ng serve",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }]

根据VS Code 中的文档，这里有更详细的步骤：

1. npm install -g @angular/cli, ng new my-app
2. 安装边缘扩展
3. 重新加载项目
4. 启动
5. 转到 Debug 视图 ( Ctrl+ Shift+ D) 并单击齿轮按钮以创建 launch.json 调试器配置文件。从“选择环境”下拉列表中选择 Chrome。使用上面 launch.json 中显示的代码更新配置。
6. 在 app.component.ts 中设置断点
7. 按F5- 它现在应该命中断点。但是在断点悬停时收到消息 - “未验证的断点”。断点没有被击中。

我尝试清除所有断点，重新启动 vs 代码（和机器），关闭所有浏览器实例，但仍然得到相同的行为。调试器能够在浏览器中启动 angular 应用程序，但无法命中断点。

那么，是否有任何其他配置可以使其与 Edge 浏览器一起使用。当前配置适用于 chrome 浏览器（只需在 launch.json 中用 chrome 替换 edge）。

Answer 1

以下确实到达了断点，但它们在 vscode 中显示为未经验证（空心圆圈）。我认为这可能与内联源映射有关。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            }
        },
        {
            "name": "debug edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:/./*": "${webRoot}/*",
                "webpack:/src/*": "${webRoot}/src/*",
                "webpack:/*": "*",
                "webpack:/./~/*": "${webRoot}/node_modules/*"
            },

        },
        {
            "name": "ng test",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": ["${workspaceFolder}/protractor.conf.js"]
        }
    ]
}