如何在VSCode中使用Edge浏览器调试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. 安装 Edge 扩展
3. 重新加载项目
4. npm start
5. 进入 Debug 视图 (Ctrl+Shift+D)，点击齿轮按钮创建一个 launch.json 调试器配置文件。在“选择环境”下拉菜单中选择 Chrome。使用上面的 launch.json 中的代码更新配置。
6. 在 app.component.ts 中设置断点
7. 按下 F5 - 现在应该会停在断点处。但是在断点悬停时仍会收到“未经验证的断点”的消息。断点未命中。

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

那么，有没有其他的配置可以让它与 Edge 浏览器一起工作呢？当前的配置可以在 Chrome 浏览器上正常工作（只需在 launch.json 中将 edge 替换为 chrome）。

- Chirag Rupani

Answer 1

这个配置现在对我来说似乎是有效的。它会在断点处停止并将其显示为可用。

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

我想他们进行了一些修复。

- gilmishal

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

- Remko

Answer 3

根据其他答案，这是我在我的电脑上逐步实现它的方法：

1. 在.vscode文件夹中创建launch.json文件，并添加以下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "https://localhost:4200",
            "webRoot": "C:\\Source\\MyApp\\Front", // You can use ${workspaceFolder}
            "version": "dev"
        },
        {
            "name": "Attach to Edge",
            "request": "attach",
            "type": "msedge",
            "port": 9222,
            "urlFilter": "https://localhost:4200/*", // attach only to angular urls
            "webRoot": "C:\\Source\\MyApp\\Front",
        }
    ]
}

将--remote-debugging-port=9222作为参数添加到Edge快捷方式属性目标中。

3. 启动新的浏览器实例或附加到现有实例：

就是这样，它会按预期工作。

如果您在配置中使用${workspaceFolder}，请注意，这意味着您需要在vscode中打开一个文件夹，位于C:\Source\MyApp\Front文件夹，而不是C:\Source\MyApp\Front\scr位置。

- donatasj87