如何在Chrome DevTools中本地覆盖带Source Map的JavaScript文件？

你说的没错，Source Map仅做代码映射，浏览器实际执行的还是压缩后的文件，直接修改原始文件自然不会生效。试试这几个实用办法：

方法一：用Chrome DevTools工作区绑定本地源码 #

• 打开Chrome DevTools切换到Sources面板
• 在左侧文件树找到你的原始源码文件，右键选择Add folder to workspace，选中本地存放原始代码的文件夹
• 授权浏览器访问该文件夹
• 之后不管是直接修改本地文件夹里的原始文件，还是在DevTools里编辑该文件，保存后DevTools会自动将修改后的代码替换掉压缩包的执行逻辑，调试时跑的就是你修改后的代码
• 注意：要保证本地文件的路径和Source Map里记录的原始文件路径对应，否则无法关联

方法二：重新构建带新Source Map的压缩文件 #

• 直接修改本地的原始源码
• 重新运行Babel构建命令，比如babel src --out-dir dist --source-maps，生成新的压缩JS和对应的Source Map文件
• 刷新浏览器，此时加载的就是新的文件，执行的就是修改后的代码
• 这种方法适合需要持久化修改，或者你的调试环境支持快速构建的场景

方法三：用DevTools本地覆盖功能 #

• 打开Chrome DevTools的Sources面板，切换到Overrides标签
• 点击Select folder for overrides，选择一个本地文件夹用来存放覆盖文件
• 授权后，找到要修改的原始源码文件，修改内容并保存
• DevTools会把修改后的文件存到你选择的覆盖文件夹，后续浏览器加载时会优先使用这个覆盖文件，替代原来的压缩包逻辑

额外注意事项 #

• 务必在DevTools的Network面板设置里勾选Disable cache，避免浏览器加载旧的压缩文件或Source Map
• 如果你的Source Map是内联在压缩JS里的，重新构建时要确保生成新的内联映射；若是外部Source Map文件，要保证新文件的路径和压缩JS里引用的路径一致

内容的提问来源于stack exchange，提问作者Richard Ver Steeg