在 VS Code 中调试 Flutter Web 应用，无需创建 Microsoft Edge 新实例

Posted 2023-02-23

【中文标题】在 VS Code 中调试 Flutter Web 应用，无需创建 Microsoft Edge 新实例

【英文标题】：Debug Flutter web app in VS Code without creating a Microsoft Edge new instance

【发布时间】：2022-01-01 09:49:17

【问题描述】：

一切都已设置并正常工作，但是当我开始使用 microsoft edge 在 vs 代码中调试颤振时，它会启动一个新实例，这意味着浏览器数据、密码、设置 .... 都已重置，所以我需要输入密码和每次我开始调试时更改设置，或者我需要打开两个浏览器实例，这既是资源密集型又是紧贴的。 是否有类似 Flutter 的 vs 代码配置可以“附加”到现有浏览器实例而不是“启动”新实例？

【参考方案1】：

您必须使用以下命令运行，

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

然后访问http://<your-ip> or localhost:8080

这样，您可以在常规浏览器中打开您的 Flutter Web 应用程序，也可以在网络中的其他设备中打开它（使用您的 ip） ** 你也应该确保你的端口（8080）是开放的。

【讨论】：

这是有效的，但每次更改都需要保存并键入 r 进行热重载或 R 进行热重启以查看更改然后刷新网页，是否有 launch.json 配置这将像 dart 在 vs 代码中的默认调试一样工作，但在已经运行的浏览器中，它将重新加载并显示更改并保存 vs 代码中的机会

我认为这是不可能的，因为我们将网络作为网络服务器运行，所以

【参考方案2】：

通常，如果在您使用启动配置开始调试时 Microsoft Edge 已经在运行，那么新实例将不会在远程调试模式下启动。

因此，默认情况下，扩展程序会在临时文件夹中使用单独的用户配置文件启动 Microsoft Edge。使用 userDataDir 设置要使用的不同路径，或设置为 false 以使用您的默认用户配置文件启动。

一个简单的例子：

    "configurations": [
        
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "type": "edge",
            "url": "...\\Index.html", // Provide your project's url to finish configuring
            "userDataDir": false // You could also add $local_app_data\Edge\Profile, such as C:\Users\<Current-user>\AppData\Local\Microsoft\Edge\Profile
        
    ]

【讨论】：

它不工作 + 我不认为这适用于颤振/飞镖应用

如何使用 Edge 进行调试？你在 VS Code 中使用过Debugger for Microsoft Edge 工具吗？如果是这种情况，您可以参考related doc。

我已经安装了扩展，但我正在以正常方式调试颤振，我在 chrome 扩展商店的 microsoft edge 中安装了 dart 调试扩展