Question

我正在使用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 start
转到Debug视图（ Ctrl + Shift + D ）并单击齿轮按钮以创建launch.json调试器配置文件。从“选择环境”下拉列表中选择Chrome。使用上面launch.json。
在app.component.ts
按 F5 - 现在应该点击断点。但是在断点悬停时收到消息 - “未验证的断点”。断点没有被击中。

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

那么，是否有任何其他配置可以使其与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"]
        }
    ]
}

Answer 2

此配置现在适合我。它会在断点处中断并显示为可用。

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

我想他们做了一些修复。

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

2 个答案: