操作指南 · 开发者
如何用 Chrome 重定向扩展把 URL 或脚本指向 localhost
简短回答
新增一条“重定向”动作的规则:用匹配模式命中生产环境的 URL,把目标设为你的 localhost 地址,浏览器就会改为加载你本地的文件或 API——直接在线上页面生效,服务器和代理一概不用动。
- 1
启动本地服务,确保替换用的文件或 API 真的有人在提供。
- 2
新增一条“重定向”动作的规则。
- 3
用匹配模式命中生产 URL,文件名带哈希就用正则。
- 4
把目标设为你的 localhost URL,保存。
- 5
重新加载页面,在命中日志和徽标计数里确认替换。
- 6
把 localhost 规则单独分组,收工时一键全部停用。
你在线上站点的某个脚本里发现了 bug,想在真实页面上验证修复——又不想等一次部署。或者前端已经上线,而你正在做的 API 改动只在本机跑得起来。一条重定向规则同时解决两件事:浏览器在请求发出时把生产 URL 换成 localhost 的,让线上页面跑你本地的代码。
先启动本地服务
先把替身跑起来——localhost:3000 上是你重新构建的 bundle,或你的开发版 API。重定向规则只改变浏览器去哪儿要东西;那头没人应答,你看到的就只是一个失败请求。
新增一条重定向规则
创建一条重定向动作的规则,匹配生产 URL:固定路径用 ||cdn.example.com/app.js;文件名带构建哈希就用正则(app\.[a-f0-9]+\.js)。
把目标指向 localhost
把目标设为你的本地 URL,例如 http://localhost:3000/app.js。Chrome 把 localhost 视为安全上下文,所以 https 页面允许加载它——这条豁免只属于 localhost,并不适用于一般的 http 主机。
重新加载并验证
重新加载页面。命中日志列出这条规则改写过的每个请求,徽标累计命中数——这才是可靠的证据,因为被替换的请求在 DevTools 里很容易看走眼。确认你的本地改动真的出现在页面上。
控制好作用范围
把 localhost 重定向放进按项目划分的分组,收工时整组关掉——一条忘了关的重定向规则,就是经典的“为什么线上只有我这儿是坏的”下午。要迁移的话,导入工具会把现有的 Requestly 或 ModHeader 重定向规则映射过来,并标出不支持的部分。
如实相告的限制
重定向绕不开浏览器的安全模型:页面若跨源 fetch 你的 localhost API,你的开发服务器仍要返回 CORS 头(script 和 img 标签一般不受影响)。另外在 Chrome 上,默认覆盖 fetch/XHR,重定向顶层跳转则需要 Full Mode——开启期间会显示醒目的调试横幅。规则存在本地、零遥测,免费版重定向规则不限数量。