Flutter VS Code插件卡在“等待Chrome调试服务连接”问题求助

针对你遇到的VS Code启动Flutter Web时卡在「Waiting for connection from debug service on Chrome...」，Chrome打开后页面空白、刷新添加#/后恢复正常，但命令行启动无异常的问题，可尝试以下排查方向：

1. 检查VS Code调试配置 #

• 打开项目根目录下的.vscode/launch.json，移除自定义的异常参数，恢复默认配置。默认配置示例：

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Flutter",
              "type": "dart",
              "request": "launch",
              "program": "lib/main.dart",
              "flutterMode": "debug"
          }
      ]
  }
  

• 若配置无问题，尝试卸载重装VS Code的Flutter插件，或在VS Code设置中搜索「Flutter」，点击「恢复默认设置」重置插件配置。

2. 重置Chrome调试环境 #

• 打开Chrome开发者工具（F12），点击右上角齿轮图标进入设置，选择「恢复默认值并重新加载」，重置调试工具配置后，结束所有Chrome进程（包括后台隐藏进程），再重新用VS Code启动项目。
• 临时关闭Chrome的「阻止第三方Cookie」等隐私限制设置，排查是否因权限拦截导致调试连接失败。

3. 调整Flutter Web启动参数 #

• 在launch.json的args中添加参数，强制启动时加载带哈希路由的URL：

  "args": [
      "--web-port", "57698",
      "--web-url", "http://localhost:57698/#/"
  ]
  

• 尝试指定Web渲染模式，添加--web-renderer html或--web-renderer canvaskit到args中，排除渲染器兼容性问题。

4. 校验Flutter SDK配置 #

• 执行flutter upgrade升级到最新稳定版Flutter，排除SDK与VS Code插件的版本兼容性问题。
• 执行flutter config --enable-web重新启用Web支持，确保配置能被VS Code正确读取。

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