Flutter项目安卓模拟器运行正常，Chrome端启动白屏如何解决？

Flutter Web启动白屏问题解决思路 #

• 优先排查Firebase Web端适配问题
  • 你当前仅完成了Android、iOS端的Firebase配置，Web端需要单独适配：在项目web/index.html文件的<body>标签内添加Firebase Web SDK初始化脚本，填入对应Firebase项目的Web端配置参数（apiKey、authDomain、projectId、storageBucket、messagingSenderId、appId）
  • 确认项目引入的所有Firebase相关Flutter插件均支持Web平台，部分插件可能存在Web端额外适配要求
• 排查入口初始化阻塞问题
  • 在await ui.webOnlyInitializerPlatform();代码行前后添加调试打印，确认该行是否执行完成，排查是否是平台初始化环节阻塞导致白屏
  • 检查main方法内的所有初始化逻辑，确认没有未加平台判断就调用的仅移动端支持的原生能力，这类逻辑触发的异常可能不会输出到Dart调试控制台
• 查看Chrome浏览器侧日志
  • 启动Chrome后按F12打开开发者工具，切换到「Console」标签页查看JS层报错，Flutter Web的部分运行时错误只会输出到浏览器控制台
  • 切换到「Network」标签页，检查是否存在静态资源加载失败、跨域请求被拦截的情况
• 清理环境缓存验证兼容性
  • 执行flutter clean清理构建缓存后，重新运行flutter run -d chrome，排除项目迁移后残留的异常缓存影响
  • 尝试切换Web渲染器测试：执行flutter run -d chrome --web-renderer html，排除CanvasKit渲染器的兼容问题
  • 确认当前设备的Flutter版本、Channel和原台式机的开发环境一致，不同版本的Flutter Web实现存在差异可能导致兼容问题
• 缩小问题范围排查
  • 新建一个空白Flutter项目运行Web端，确认基础开发环境没有问题，再逐步向空白项目移植现有代码和依赖，定位触发问题的具体模块

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