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

【问题标题】：How to debug Angular application in VSCode using Edge browser?如何使用 Edge 浏览器在 VSCode 中调试 Angular 应用程序？
【发布时间】：2018-10-05 10:26:56
【问题描述】：

我正在使用Edge extension。以下是launch.json中的配置：

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

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

npm install -g @angular/cli, ng new my-app
安装Edge extension
重新加载项目
npm 开始
转到调试视图 (Ctrl+Shift+D) 并单击齿轮按钮以创建 launch.json 调试器配置文件.从选择环境下拉菜单中选择 Chrome。使用上面 launch.json 中显示的代码更新配置。
在 app.component.ts 中设置断点
按 F5 - 现在应该会遇到断点。但是在断点悬停时收到消息 - “未验证的断点”。断点未命中。

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

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

【问题讨论】：

标签： angular debugging visual-studio-code microsoft-edge vscode-debugger

【解决方案1】：

这个配置现在似乎对我有用。它在断点处中断并显示为可用。

 {
        "name": "Edge",
        "type": "edge",
        "request": "launch",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceFolder}",
        "sourceMaps": true,
        "trace": true,
        "userDataDir": "${workspaceRoot}/.vscode/edge"
    }

我猜他们做了一些修复。

【讨论】：

【解决方案2】：

以下内容确实遇到了断点，但它们确实在 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"]
        }
    ]
}

【讨论】：