Flutter Web App Chrome中Source Map加载失败（404错误）

核心原因 #

Flutter构建Web时生成的source map中，源码路径指向的是项目中的.dart文件，但默认构建产物不会包含这些源码文件，服务器也未托管它们，导致DevTools请求时返回404。

解决步骤 #

1. 本地调试场景处理 #

默认flutter build web --release --source-maps不会将.dart源码打包到build/web目录，需手动复制源码到构建目录：

• 将项目根目录下的lib/文件夹完整复制到build/web/目录下
• 确保build/web/lib/main.dart等源码文件存在，本地服务器即可正常响应DevTools的源码请求

2. 云端部署（GCP Cloud Run）场景处理 #

云端无需托管源码，可通过dart2js的参数将源码内容嵌入source map，避免依赖服务器文件：

• 修改构建命令，添加--embed-source参数嵌入源码：

  flutter build web --release --source-maps --dart-define=DART2JS_FLAGS="--embed-source"
  

• 构建完成后，main.dart.js.map会包含sourcesContent字段，DevTools直接从source map读取源码内容，无需请求服务器上的.dart文件

3. 验证配置 #

• 本地调试：启动服务器后，打开DevTools的Sources面板，点击.dart文件应能正常显示内容
• 云端部署：重新部署后，同样在Sources面板验证源码是否加载正常

额外注意事项 #

• 生产环境谨慎使用--embed-source：该参数会将完整源码嵌入source map，若需保护源码，调试完成后应移除该参数，或不部署source map文件
• 本地服务器配置：确保服务器允许访问.dart后缀的文件，部分静态服务器默认会过滤非标准静态文件类型，需调整配置放行

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