Flutter Web在Chrome运行卡在初始加载白屏无额外报错

该故障仅出现在Web端、移动端运行正常的核心原因是Flutter Web与原生端采用完全独立的渲染、初始化链路，3.0.1稳定版在Mac arm架构环境下的常见触发原因及对应修复方案按排查优先级排序如下：

• 浏览器缓存损坏
  某次热重启过程中Chrome缓存了不完整的Web启动引导文件，是该场景最高发的诱因。打开Chrome开发者工具，进入Application面板，选择Storage分类下的Clear site data，勾选所有存储类型（含Cache Storage、Service Worker、Local Storage等）后执行清除，再按Cmd+Shift+R硬刷新页面即可。
• 项目构建缓存污染
  执行flutter clean命令，手动删除项目根目录下的build文件夹，再执行flutter pub get重新拉取依赖，完全关闭Android Studio和之前打开的Chrome调试窗口后重新启动项目，不要复用之前的调试会话。
• 渲染器自动选择异常
  Flutter 3.0.1版本Auto模式下自动选择渲染器时，在部分Mac arm设备的Chrome环境中会出现Canvaskit渲染器初始化卡死、无报错日志的问题。启动时强制指定HTML渲染器即可验证：flutter run -d chrome --web-renderer html，如果启动正常，可以在web/index.html中固定渲染器配置为html，避免自动选择逻辑异常。
• Web端初始化代码阻塞
  默认日志级别下部分Web端不兼容的同步调用不会输出明显报错，会直接卡在Bootstrap阶段。打开Chrome开发者工具Console面板，将日志级别调整为Verbose，查看被折叠的报错信息。最常见的诱因是runApp执行前调用了仅适配移动端的插件（如本地存储、系统权限类插件），这类调用在移动端可正常执行，Web端会直接阻塞初始化流程。可临时将main函数替换为最简测试代码验证：

  void main() {
    runApp(const MaterialApp(home: Scaffold(body: Text("测试页面"))));
  }
  

  如果最简代码可正常加载，逐段恢复原有初始化逻辑，对不兼容Web的调用添加kIsWeb平台判断，Web端跳过对应逻辑即可。
• 调试端口占用
  之前异常退出的调试进程占用端口会导致返回的启动资源不完整，执行lsof -i :60303找到对应占用进程后kill，或者启动时指定新的端口规避：flutter run -d chrome --web-port=8080

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