Chrome DevTools Local Overrides在Webpack Source Maps中不生效问题排查

核心原因 #

你遇到的情况几乎都是Source Map映射关系异常导致的，并非Chrome DevTools的普遍Bug。DevTools中Sources面板显示的格式化JS文件，是通过服务器返回的Source Map解析生成的；当你尝试修改这个映射后的文件时，如果Source Map的路径、关联关系有问题，DevTools无法将本地修改正确映射到浏览器实际请求的原始压缩文件上，导致浏览器仍加载服务器资源。

而你用的临时方法之所以有效，是因为直接针对浏览器实际请求的原始压缩文件建立了Local Overrides，跳过了Source Map的映射环节，覆盖逻辑直接生效。

具体解决方案 #

• 验证Source Map有效性

  1. 在Sources面板打开目标格式化文件，右键选择「Show Original Source」，确认能正确跳转到对应的原始压缩文件
  2. 检查原始压缩文件的末尾是否包含正确的Source Map注释（如//# sourceMappingURL=xxx.js.map），同时在Network面板确认该map文件能正常加载（返回200状态码）
  3. 查看Source Map文件的sources字段，确保它指向的文件路径与Sources面板中显示的格式化文件路径完全匹配

• 直接关联原始压缩文件到Local Overrides
  如果你确认Source Map存在问题，可固定使用以下流程：

  1. 在Sources面板打开目标格式化文件，右键选择「Reveal in Network panel」定位到原始压缩文件
  2. 对该压缩文件右键选择「Save for overrides」，后续直接修改本地的这个压缩文件即可确保覆盖生效

• 临时禁用Source Map调试
  若仅需快速调试，可跳过Source Map：

  1. 按F1打开DevTools设置，取消勾选「Enable JavaScript source maps」和「Enable CSS source maps」
  2. 刷新页面后，Sources面板将直接显示原始压缩文件，此时建立Local Overrides修改即可生效

• 重置DevTools配置
  若怀疑是DevTools缓存或配置异常导致：

  1. 按F1打开DevTools设置，点击「Restore defaults and reload」
  2. 重新启用Local Overrides并尝试修改文件

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