Flutter Web无Source Maps，无法调试问题求助

我将Flutter Web应用部署到Firebase Hosting后，使用chrome://inspect调试时遇到棘手问题：仅Web环境出现错误，但错误日志全部指向压缩编译后的main.dart.js，无法定位到原始Dart代码位置。我已尝试在本地网络、Firebase预览渠道及主站点部署时添加--source-maps参数，但Source Maps始终不生效，也找不到可靠的文档指导。

附Chrome开发者工具错误截图（原链接已移除）

我试过的构建命令：

• flutter run -d web-server --web-hostname {IP-ADDRESS} --web-port 8080 --web-renderer html
• flutter run -d web-server --web-hostname {IP-ADDRESS} --web-port 8080 --web-renderer html --source-maps
• flutter build web --release --source-maps
• flutter build web --release --web-renderer html --source-maps
• flutter build web --web-renderer html --release --source-maps && firebase hosting:channel:deploy my-html-test-channel
• flutter build web --web-renderer html --release --source-maps && firebase deploy --only hosting

解决步骤 #

1. 检查Firebase Hosting配置，避免Source Maps被处理 #

Firebase默认的资源优化可能会移除或篡改Source Maps，需修改firebase.json的hosting配置：

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "**/*.map",
        "headers": [{"key": "Access-Control-Allow-Origin", "value": "*"}]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

核心是添加headers允许Source Maps的跨域访问，同时确保ignore列表未排除.map文件。

2. 验证构建产物中的Source Maps是否生成 #

执行flutter build web --release --source-maps后，检查build/web目录：

• 确认存在main.dart.js.map文件
• 打开main.dart.js，末尾需包含//# sourceMappingURL=main.dart.js.map的注释

若未生成，先执行flutter upgrade升级到稳定版，部分旧版本Flutter的Source Maps生成存在bug。

3. 配置Chrome DevTools关联Source Maps #

打开Chrome开发者工具后：

• 点击右上角齿轮图标进入Settings
• 勾选Enable JavaScript source maps和Enable CSS source maps
• 在Sources面板中，若未自动显示Dart文件，右键面板选择Show files from file system，手动导入本地Flutter项目源码目录，DevTools会自动关联Source Maps。

4. 临时禁用Firebase自动压缩（调试用） #

若上述步骤无效，可在firebase.json中禁用Firebase的自动压缩，防止其修改Source Maps：

{
  "hosting": {
    // 其他配置保留
    "minify": false
  }
}

注意：此为临时调试方案，上线前建议恢复自动压缩。

5. 本地调试的更优姿势 #

改用flutter run -d chrome --web-renderer html --source-maps直接启动Chrome调试，该模式下Chrome会自动关联Source Maps，可直接在DevTools中查看并断点调试Dart代码。

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