angular - 如何使用 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. npm 开始
5. 转到调试视图 ( Ctrl++ Shift)D并单击齿轮按钮以创建 launch.json 调试器配置文件。从选择环境下拉菜单中选择 Chrome。使用上面 launch.json 中显示的代码更新配置。
6. 在 app.component.ts 中设置断点
7. 按F5- 它现在应该达到断点。但是在断点悬停时收到消息 - “未验证的断点”。断点没有被击中。

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

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

Answer 1

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

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

我猜他们做了一些修复。

Answer 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"]
        }
    ]
}