Chrome的Overrides功能，能让你直接在本地面板上修改线上正在运行的JavaScript代码。改完存盘，刷新就能看到效果，下次打开还会自动加载这个本地版本。是不是感觉像给调试流程加了“时光倒流”功能？

想象一下这个场景：你正在调试一个线上页面，突然发现某个JS函数里有个逻辑缺陷。需要临时调整行为，或者只是想插入几句调试日志。又不想惊动后端同事，不想动服务器代码，更不想走一遍构建打包部署的流程。这时，Chrome的Overrides就是那个救急方案。它能将你改好的JS代码持久化存储到本地文件夹。每次刷新页面，都会自动加载这个“本地版本”，而不再是线上的原始代码。

启用Overrides并授权本地文件夹

首先打开目标网页，按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（Mac）召唤出开发者工具。

切换到 Sources 面板。在左侧边栏最底部找到 Overrides 标签（图标是一个文件夹加一个向下箭头）。

点击 Select folder for overrides，选择一个空文件夹——比如桌面新建一个名为 chrome-js-overrides 的文件夹。系统会弹出权限确认弹窗，务必点击 Allow。

这一步不允许失败。如果没看到权限弹窗，可能是浏览器被系统级策略拦截了，或者文件夹路径包含中文导致问题。换一个非中文路径、纯英文的文件夹再试一次。确认该文件夹出现在 Overrides 标签下，并且前方的复选框保持勾选状态——此时，覆盖功能才算真正激活。

将线上JS文件映射到本地覆盖路径

接下来需要把你要修改的线上JS文件“映射”一份到本地。

方法一：右键映射（新手推荐）

在 Sources → Page 子标签中，展开资源树，找到你想要覆盖的JS文件（例如 https://example.com/static/js/main.abc123.js）→ 右键 → 点击 Sa ve for overrides。保持默认路径，点 Sa ve。

方法二：拖拽映射（适合批量操作）

直接从 Page 树中将目标JS文件拖到左侧 Overrides 下的文件夹节点内，松手即完成映射。

映射成功后，该文件图标旁边会出现一个紫色圆点。同时在 Overrides → Filesystem 中能看到完整的路径副本。这里需要特别留意：文件名和目录层级必须与线上URL路径严格一致。比如线上文件路径是 /assets/bundle.js，那么本地就必须生成在 chrome-js-overrides/assets/bundle.js，否则覆盖不生效。

编辑并保存JS内容使修改持久化

第一步：在 Sources → Page 中双击打开已经映射的JS文件，或者直接在 Overrides → Filesystem 中找到并打开它。

第二步：任意修改代码——可以删掉校验逻辑、替换API地址、加个 debugger、插入 console.log，甚至直接重写整个函数体。发挥空间非常大。

第三步：按 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存。首次保存会弹出一个确认框，点 Sa ve；之后所有的保存都会直接写入本地磁盘，不再需要二次确认。

这个操作看起来很简单，但要注意：保存动作必须在 DevTools 的编辑器内完成。不能在外部编辑器改完再切回来，外部改动不会触发Chrome自动重载。

验证JS覆盖是否真实生效

刷新页面，打开Network面板，找到对应的JS请求，查看响应状态栏：如果显示 200 (from Overrides)，说明页面正在加载你本地的版本。

如果仍然显示 200 (from disk cache) 或 200 (from ServiceWorker)，先禁用缓存（在 Network 面板左上角勾选 Disable cache），再执行一次硬刷新（Ctrl+F5 或 Cmd+Shift+R）。

最后，打开 Console，执行一段能够暴露修改效果的代码——比如调用一下你刚刚改过的那个函数，观察输出是否为你本地写入的内容。这才是最直接的生效证据。

《夸克》非常好用的免费AI浏览器

下载APP查看