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

【问题标题】：How to debug in VS Code by attaching to Edge browser?如何通过附加到 Edge 浏览器在 VS Code 中进行调试？
【发布时间】：2021-06-29 15:03:58
【问题描述】：

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

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

我已启动边缘浏览器并通过此命令在指定端口上启用远程调试。

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

我收到以下错误

【问题讨论】：

标签： javascript microsoft-edge vscode-debugger

【解决方案1】：

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

在开始在 VS Code 中调试之前，您是否先在 Edge 中启动了要调试的页面？ "request": "attach" 表示将调试附加到现有实例。比如我需要调试这个页面https://localhost:44364/test.html，那么我会在start msedge.exe --remote-debugging-port=9222之后导航到Edge中的这个url。结果是这样的：

更新：

如果您使用的是Debugger for 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)。

【讨论】：

我已经安装了 VSCode 的扩展，即 Edge v 1.0.15 的 Javascript 调试器和 Edge 浏览器是最新的 91.0.864.59
@Harkiratsingh 我明白了，您使用的是Debugger for Microsoft Edge，而不是JavaScript Debugger。 Microsoft Edge Debugger 的启动设置应为"type": "edge"，您可以参考this doc 了解更多信息。您可以查看我更新的答案，并在尝试后告诉我们问题是否已解决。
它说当我改回边缘时无法识别调试类型

【解决方案2】：

Microsoft Edge 扩展 API 不支持 official docs 中所述的承诺。

如果可以选择，您可以在应用中使用回调而不是 Promise..

另请参阅 github 上的问题 here 和 there。

【讨论】：

【解决方案3】：

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

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

附加调试器并添加断点并开始工作。

【讨论】：