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

h5qlskok 于 2022-11-30 发布在 Vscode

关注(0)|答案(3)|浏览(455)

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

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

以下是VS代码中每个文档的更详细步骤：

npm安装-g @angular/cli，ng新的我的应用程序
1.安装Edge extension
1.重新载入项目
npm启动
1.转到调试视图（Ctrl+Shift+D）并单击齿轮按钮创建launch.json调试器配置文件。从选择环境下拉列表中选择Chrome。使用上面launch.json中显示的代码更新配置。
1.在app.component.ts中设置断点
1.按下F5 -它现在应该命中断点。但在悬停断点时得到消息-“未验证断点”。断点未命中。
我尝试清除所有断点，重新启动vs代码（和机器），关闭所有浏览器示例，但仍然得到相同的行为。调试器能够在浏览器中启动Angular 应用程序，但无法命中断点。
那么，有没有其他配置可以让它与Edge浏览器一起工作？当前的配置与Chrome浏览器一起工作很好（只需在launchiderjson中用Chrome替换Edge即可）。

debugging

来源：https://stackoverflow.com/questions/50013884/how-to-debug-angular-application-in-vscode-using-edge-browser

3条答案

按热度按时间

bfhwhh0e1#

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

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

我猜他们做了些修复。

赞(0）回复(0）举报 2022-11-30

n6lpvg4x2#

下面的代码确实遇到了断点，但是它们在vscode中显示为未验证（空心圆）。我认为这可能与内联源代码Map有关。

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

赞(0）回复(0）举报 2022-11-30

jexiocij3#

根据其他人的回答，下面是我如何在我的机器上逐步实现该功能的：
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",
        }
    ]
}

1.将--remote-debugging-port=9222作为参数添加到边快捷方式属性Target