Chrome Overrides手动添加文件无法加载本地source map的解决方法

Chrome Local Overrides的拦截逻辑默认不会自动识别你直接拷贝到Overrides目录的文件，只有当你在DevTools中对对应资源执行过Save for overrides操作、生成了覆盖元数据后，Chrome才会拦截该路径的网络请求返回本地文件，直接手动往目录丢文件不会触发拦截注册，这就是.map文件仍然请求远程的核心原因，和你有没有在Sources面板修改过map文件无关。

下面是三种可直接落地的解决方法，按推荐优先级排序：

• 方法1：手动初始化覆盖规则（最稳定，无副作用）

  1. 打开DevTools切换到Network面板，清空缓存后硬刷新目标页面
  2. 在网络请求列表里找到你需要覆盖的所有资源，包括目标JS文件、对应的.mapsource map文件
  3. 逐个右键选中资源，点击Save for overrides，Chrome会自动在你配置的Overrides目录下生成和线上路径完全一致的占位文件，同时写入覆盖规则元数据
  4. 把你本地编译生成的JS、map文件直接替换掉Overrides目录下对应路径的占位文件即可
  5. 后续你的文件监听脚本正常同步变更到对应路径就可以生效，Chrome不会再对这些注册过的路径发起远程请求，会直接读取本地文件内容

  关键校验点：本地文件在Overrides目录下的相对路径必须和线上资源的URL路径完全匹配，比如线上map地址为https://a.com/js/b.js.map，对应本地路径必须是[Overrides根目录]/a.com/js/b.js.map，路径层级错误会直接导致覆盖失效。

• 方法2：内联source map（最省事，适合纯本地开发场景）
  不需要单独处理.map文件的覆盖规则，直接修改TypeScript编译配置将source map内联到JS文件中：

  1. 打开项目的tsconfig.json配置文件
  2. 关闭sourceMap配置项，新增"inlineSourceMap": true配置
  3. 重新执行TS编译，生成的JS文件末尾会直接携带base64编码的source map内容
  4. 只需要把编译后的JS文件同步到Overrides目录即可，Chrome解析JS时会直接读取内联的source map，根本不会发起单独的.map文件请求，完全规避map文件的覆盖问题。

• 方法3：搭配请求拦截强制读本地（适合批量资源覆盖场景）
  如果需要覆盖的资源数量太多，不想逐个手动注册覆盖规则，可以搭配DevTools的请求拦截功能实现：

  1. 打开DevTools的Network面板，找到Request blocking选项卡
  2. 添加拦截规则，匹配目标站点下所有.map后缀的请求路径，比如*://your-target-domain.com/*.map
  3. 确保你同步到Overrides目录的map文件路径和线上路径完全一致
  4. 开启请求拦截后，Chrome发起map请求时会被直接拦截，自动 fallback 读取Overrides目录下的同路径本地文件，不会请求远程服务器

  注意：该方案如果本地路径不匹配会直接导致source map加载失败，调试时注意Console面板的source map报错提示即可。

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