如何通过附加到 Edge 浏览器在 VS Code 中进行调试？

Question

1. 我已经在我的 VSCode 中安装了 Edge 浏览器的 javascript 调试器
2. 它像这样修改launch.json文件。

    "configurations": [
    {
        "name": "Attach to Edge",
        "port": 9222,
        "request": "attach",
        "type": "pwa-msedge",
        "webRoot": "${workspaceFolder}"
    }

3. 我已经启动了edge浏览器，并通过此命令在指定端口启用了远程调试。

启动 msedge.exe --remote-debugging-port=9222

我收到以下错误

Answer 1

您使用的是哪个版本的 JavaScript 调试器和 Edge 浏览器？我使用 JavaScript 调试器 v1.57.0 和 Edge 浏览器版本 91.0.864.59 进行测试，效果很好。

在开始在 VS Code 中调试之前，您是否先在 Edge 中启动了要调试的页面？

"request": "attach"

表示将调试附加到现有实例。例如，我需要调试此页面

https://localhost:44364/test.html

，然后我将在

start msedge.exe --remote-debugging-port=9222

之后在Edge中导航到此网址。结果是这样的：

---

更新：

如果您使用的是 Microsoft Edge 调试器，您可以使用如下所示的

launch.json

，然后按照我在上一个答案中所说的操作：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "edge",
      "request": "attach",
      "name": "Attach to Edge",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

注意： 请安装最新版本的 Visual Studio。 VS 版本 >= 15.9.19 支持调试 Microsoft Edge (Chromium)。

Answer 2

Microsoft Edge 扩展 API 不支持官方文档中所述的承诺。

如果可以选择，您可以在应用程序中使用回调而不是承诺..

另请参阅 github 上的问题这里和那里。

Answer 3

1. 我卸载了 Debugger for microsoft Edge 扩展并重新安装了
2. 然后我全局禁用了 Javascript 调试器扩展。
3. 我关闭了边缘浏览器的所有实例并运行以下命令。

启动 msedge.exe --remote-debugging-port=9222

4. 附加调试器并添加断点，它开始工作。

Answer 4

安装 [适用于 VSCode 的 Microsoft Edge Tools][1]。

在.vscode中使用这个launch.json

    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "msedge",
                "name": "Launch Microsoft Edge",
                "request": "launch",
                "cleanUp": "wholeBrowser",
                "cascadeTerminateToConfigurations": [
                    "Open Edge DevTools"
                ],
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            },
            {
                "type": "msedge",
                "name": "Launch Microsoft Edge in headless mode",
                "request": "launch",
                "runtimeArgs": [
                    "--headless",
                    "--remote-debugging-port=9222"
                ],
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            },
            {
                "type": "vscode-edge-devtools.debug",
                "name": "Open Edge DevTools",
                "request": "attach",
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            }
        ],
        "compounds": [
            {
                "name": "Launch Edge Headless and attach DevTools",
                "configurations": [
                    "Launch Microsoft Edge in headless mode",
                    "Open Edge DevTools"
                ],
                "stopAll": true
            },
            {
                "name": "Launch Edge and attach DevTools",
                "configurations": [
                    "Launch Microsoft Edge",
                    "Open Edge DevTools"
                ],
                "stopAll": true
            }
        ]
    }