在VS Code中调试Flutter Web应用如何避免新建Microsoft Edge实例

可以通过两种方式解决每次启动调试都初始化新Edge实例的问题，配置完成后可保留浏览器数据、密码、自定义设置。

方案1：直接启动带用户数据的Edge调试实例（无需手动attach，操作更简单） #

直接修改.vscode/launch.json的启动配置，指定Edge读取你的默认用户数据目录即可，无需切换attach模式：

1. 找到你本地Edge的用户数据存储路径：
   • Windows默认路径：C:\Users\你的用户名\AppData\Local\Microsoft\Edge\User Data
   • Mac默认路径：~/Library/Application Support/Microsoft Edge
   • Linux默认路径：~/.config/microsoft-edge
2. 在launch.json中添加如下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter Edge 调试（保留用户数据）",
      "request": "launch",
      "type": "dart",
      "deviceId": "edge",
      "args": [
        "--web-browser-flag", "--user-data-dir=替换为上面查到的用户数据目录路径"
      ]
    }
  ]
}

3. 之后直接选择该配置启动调试，打开的Edge实例会读取你本地已有的用户数据，无需每次重新登录或修改设置。

方案2：Attach到已打开的Edge实例 #

如果你习惯提前打开Edge，不想每次调试都新启动浏览器进程，可以用attach模式：

1. 给Edge快捷方式添加启动参数，开启远程调试端口：
   • Windows：右键Edge快捷方式选择「属性」，在「目标」输入框的原有内容末尾，加一个空格后补充--remote-debugging-port=9222，保存后用该快捷方式启动Edge
   • Mac：终端执行命令 /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9222 启动Edge
   • Linux：终端执行命令 microsoft-edge --remote-debugging-port=9222 启动Edge
2. 在launch.json中添加attach配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter 附着到已有Edge实例",
      "request": "attach",
      "type": "dart",
      "deviceId": "web-server",
      "port": 9222,
      "host": "localhost"
    }
  ]
}

3. 操作流程：
   • 用加了调试参数的Edge提前打开你需要的页面，登录账号保留好相关状态
   • VS Code终端执行 flutter run -d web-server，编译完成后复制终端输出的应用访问地址
   • Edge打开该地址，确认应用正常加载
   • 运行和调试面板选择上述attach配置，点击启动即可附着到已有Edge实例进行调试，热重载、断点等功能完全不受影响。

注意事项 #

• 如果配置后出现冲突，检查9222端口是否被其他程序占用，可替换为其他闲置端口，两边配置端口保持一致即可
• 方案1的配置和原启动流程完全一致，不需要额外操作，更推荐日常使用

内容的提问来源于stack exchange，提问作者phaylali