15 分钟上手 Header Editor从改请求头到拦截请求的完整清单【免费下载链接】HeaderEditorManage browsers requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor加班到深夜他决定换一种方式联调阿凯在一家电商公司写前端。他的日常是本地起一个开发环境对接测试环境的 API偶尔还要切到预发布环境看效果。问题在于三个环境的接口都要求不同的认证令牌他每天相当一部分工作是在代码里搜 token、改 token、再刷新页面。直到有天晚上他把测试令牌忘改回去一口气提交到了生产分支。那晚的教训让他明白联调不该靠人肉记忆。他找到了一款叫 Header Editor 的开源免费浏览器扩展——它能修改浏览器发出的请求包括请求头、响应头、响应体也能把请求重定向到别的地址或者干脆取消它。装上之后环境切换变成了点一下开关的事。Header Editor 是一款面向浏览器请求控制的扩展核心是接管浏览器发出的每一个请求。它本身不生产功能而是给你一张规则表你写下规则它负责在请求离开浏览器前、或响应回到浏览器时按你的要求动手。这份 Header Editor 指南面向零基础用户从安装到进阶全程不用写几行代码。立刻上手装好扩展3 分钟跑通第一条规则安装选商店还是本地加载浏览器最省事的路径备选方案Chrome应用商店搜索 Header Editor装精简版Lite下载HeaderEditor-x.x.x-v3.crx在chrome://extensions/开启开发者模式后拖拽安装Edge加载项商店搜索 Header Editor同 Chrome 的本地加载方式Firefox附加组件商店搜索 Header Editor / Header Editor Lite官网 Release 下载安装包后手动加载精简版和完整版的区别一句话能说清完整版多了自定义函数和正则排除这类高级能力普通用户从精简版开始就够用。装好后浏览器工具栏会多一个带铅笔图标的 HE 按钮。第一条规则把网页伪装成手机版这一步只花两分钟但足以让你感受到整套系统的工作方式点击工具栏的 HE 图标打开管理面板。点右下角的添加按钮新建一条规则。匹配条件选网址前缀填https://m.example.com/。功能选修改请求头头名称填User-Agent内容填一段 iPhone 的 UA 字符串。保存刷新页面。此时访问m.example.com服务器收到的 UA 就是你的手机型号。按 F12 打开开发者工具在网络面板点开任意请求就能在请求头里看到改动后的痕迹。验证小技巧不少网站会按 UA 返回不同页面改完 UA 再看网页结构如果和原来不一样说明规则已经生效。这是 Header Editor 修改请求头最直观的体验。换个角度看核心能力把每个请求想象成一个快递包裹先不看功能清单看一个类比。浏览器每次访问网页都相当于寄出一个快递包裹快递单上的寄件人、收件人、备注就是请求头。快递要送到的地址就是请求的 URL。包裹里的东西就是服务器返回的响应体。快递员的回执单就是响应头。Header Editor 就是你家楼下的快递中转站。它能在三个环节动手脚你遇到的真实问题包裹类比对应的能力请求带错了身份信息UA、Cookie、token 不对出发前改写快递单修改请求头服务器返回的内容不合胃口跨域、格式不对签收前拆开重打包修改响应头 / 修改响应体请求送错了地方要走镜像、要跳 HTTPS中途改写收货地址重定向请求有些请求根本不想收广告、埋点直接拒收取消请求这套心智模型的好处是遇到任何网络层面的怪问题先问自己这是快递单的问题、地址的问题还是包裹内容的问题再决定配哪类规则。规则之间还能叠加——同一个请求可以既改头、又改地址也可以按优先级让特定规则先执行。真实案例集五个高频需求照着配就行下面五个案例覆盖了大多数人装 Header Editor 的真实动机。每个案例都是问题 → 操作 → 前后对比参数可以直接照抄。案例一多环境联调自动携带认证令牌问题前端联调时要在开发 / 测试 / 预发布三个环境间切换每个环境的 Authorization 都不同手工改代码容易忘改、改错。操作新建规则匹配条件选网址前缀填https://test-api.example.com/。功能选修改请求头头名称Authorization值填Bearer test-token-123。再建一条同样的规则前缀换成预发布地址令牌换成另一份。前后对比之前每次切环境要改代码、重新编译现在切环境 切换规则开关联调请求自动带对令牌省掉了最易出错的环节。案例二图片防盗链改 Referer 让图片正常显示问题把站外图片贴到自己页面很多图床会返回 403因为请求携带的 Referer 指向了不被信任的域名。操作新建规则匹配条件选网址前缀填图片所在的域名如https://imgsrc.example.com/。功能选修改请求头头名称Referer值填一个允许访问的站点地址如https://www.example.com。前后对比改之前图片位置一片灰改之后图片正常加载。这个思路对多数防盗链场景通用社区里也流传着大量现成的 Referer 规则可以直接导入。案例三本地调试跨域接口补上 CORS 响应头问题本地起的前端要调用另一个域的 API浏览器因为缺少 CORS 头直接拦截控制台一片报错。操作新建规则资源类型选xmlhttprequest匹配地址填 API 域名。功能选修改响应头依次添加三条Access-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, POST, PUT, DELETEAccess-Control-Allow-Headers: Content-Type, Authorization前后对比改之前请求被浏览器拦下网络面板标红改之后接口正常返回数据。这条规则适合调试期顺手用生产环境请让后端正规配置 CORS。案例四取消埋点和跟踪请求让页面安静下来问题某些第三方统计脚本会在每个页面偷偷发请求拖慢加载还可能泄漏访问行为。操作新建规则匹配网址前缀或正则填埋点域名的特征路径。功能选取消请求。前后对比改之前网络面板里躺着几十个埋点请求改之后这些请求直接消失页面加载明显变快。规则粒度可以很细只拦特定路径、放行其余。案例五临时替换页面内容验证前端展示问题想看看某段文案或某个接口返回字段换成别的值后页面渲染成什么样但改服务端成本太高。操作需要完整版Chrome 下启用响应体修改会提示已开始调试此浏览器属正常现象新建规则匹配目标网址。功能选修改响应体编码保持 UTF-8。在自定义函数里写一句替换逻辑例如把页面中的baidu全部替换成Googlereturn val.replace(/baidu/g, Google);前后对比改之前页面显示原文改之后打开同一网址文案已按规则替换适合快速做文案与展示的验证。进阶玩法当改头换面不够用时你还有三张牌第一张牌自定义函数规则写不出的逻辑交给代码完整版支持在规则里挂一段 JavaScript动态生成头值、按条件决定是否重定向。它接收val和detail两个参数前者是当前 URL 或头数组后者包含请求方法、资源类型、发起页面等信息。例如只把图片和视频请求重定向到另一个域名if (detail.type media) { return val.replace(example.com, example.org); }官方提醒能用普通规则解决的就别用函数函数是最后的手段。想深入研究看 custom-function.md。第二张牌运行模式用性能换能力的选择题每条规则都有两种运行模式模式性能能力DNR 模式declarativeNetRequest更好不支持自定义函数、正则排除Web Request 模式稍差功能全面全都要日常使用建议优先 DNR遇到搞不定的场景再切 Web Request。第三张牌规则资产化分组、导入导出、云备份规则多了以后Header Editor 提供完整的资产管理按功能分组认证组、缓存组、调试组、一键导入导出分享给团队、绑定云备份防止丢失。社区里也有现成的第三方规则可直接下载启用详见 third-party-rules.md 与 cloud-backup.md。如果你对技术实现感兴趣请求处理的核心逻辑在src/pages/background/request-handler/目录下包含 DNR 处理器、Web Request 处理器和响应修改器三块。想本地跑起来先git clone https://gitcode.com/gh_mirrors/he/HeaderEditor再pnpm i --frozen-lockfile最后按需执行npm run build:chrome_v2Chrome 完整版或npm run build:chrome_v3Chrome 精简版产物在dist_*目录。新手指南常见疑问Q1规则配好了为什么没生效按顺序排查规则开关是否打开 → 匹配条件是否写得太宽或太窄先从前缀匹配试起→ 是否被排除规则命中 → 是否命中浏览器限制如 Chrome 不允许改chrome.google.com/webstore开头的请求→ 刷新页面再试。Q2精简版和完整版到底选哪个只改请求头、重定向、取消请求精简版完全够用且性能更好需要自定义函数或正则排除再上完整版。Chrome 上完整版不走应用商店需要下载 crx 本地安装。Q3Chrome 提示Header Editor 已开始调试此浏览器正常吗正常。这是启用修改响应体功能时调用了 Chrome 的调试接口所致。介意的话在选项里关掉修改响应体或给 Chrome 加--silent-debugger-extension-api参数启动。Q4怎么删除某个请求头把该头的值设为_header_editor_remove_即可这是从 3.0.5 起内置的约定值比空值更可靠。Q5改了响应头为什么开发者工具里看不到开发者工具显示的是浏览器缓存的一份原始记录不代表实际生效情况。验证办法很直接把content-type改成text/plain网页立即以纯文本显示就说明规则真的生效了。最后的话给浏览器一张可以改的快递单回到阿凯的故事。装上 Header Editor 之后他的环境切换变成了一次点击测试令牌再也没被带进生产环境。他常说这个扩展最妙的地方不是功能多而是把调网络从改代码里解放了出来——需求变了改规则环境换了切开关代码一行不动。你现在就可以做三件事去商店装上 Header Editor精简版即可照着上文的第一条规则改一次 UA体验规则从配置到生效的完整闭环然后把你最常遇到的网络问题对照快递中转站的三个环节配出属于自己的第一条规则。网络请求每天都在发生而控制权值得握在你自己手里。【免费下载链接】HeaderEditorManage browsers requests, include modify the request headers, response headers, response body, redirect requests, cancel requests项目地址: https://gitcode.com/gh_mirrors/he/HeaderEditor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考