ARTICLE · 1167410
这5个Chrome插件,让我彻底告别低效调试!
📅 2026-10-10 💻 效率工具 ⏱️ 阅读约5分钟
说个真实的事——我带的新人里面，十个有八个调试接口的时候，是打开F12，对着Network面板里那一坨压缩的JSON，用Ctrl+F一个字段一个字段地找。找到眼花不说，换个请求还得重新来一遍。
我自己也是这么过来的。直到后来装了几个Chrome插件，才发现浏览器本身的调试能力被严重低估了。下面这5个，是我电脑上常年开着的，少一个都不习惯。
🌲 JSON Viewer——看接口返回不再是一坨屎
这个插件我排第一，因为装了它之后，Chrome里打开任何JSON都会自动格式化+语法高亮。可以折叠展开节点，可以搜索字段名，树形结构一目了然。
以前看一个嵌套很深的JSON响应，要复制到VS Code里格式化再看。现在直接在Network面板里点开Response，就是格式化好的树形结构，点几下就找到了想要的字段。
💡 核心功能
✅ JSON自动格式化 + 语法高亮（字符串绿色、数字橙色、关键字紫色）
✅ 树形折叠展开，大JSON不会看花眼
✅ 支持搜索字段名，Ctrl+F直接定位
✅ 可以复制任意节点的路径（JSONPath）
📋 官网信息
Chrome Web Store 免费安装，搜索 "JSON Viewer" 即可。同类插件还有 JSONView、JSON Formatter，选一个就行。
🔧 ModHeader——调试接口时动态改请求头
后端开发肯定遇到过这个场景：测试不同租户的接口，需要在请求头里切 X-Tenant-Id；测试灰度发布，需要加 X-Gray-Flag。以前要么用Postman，要么在代码里硬编码改来改去。
有了ModHeader，直接在Chrome里设置请求头，所有浏览器发出的请求都会自动带上。切租户、切环境、模拟不同用户，点一下就搞定。
💡 典型用法
✅ 设置 Authorization: Bearer xxx 模拟登录态
✅ 设置 X-Tenant-Id 切换多租户
✅ 设置 X-Forwarded-For 模拟不同IP
✅ 支持Profile分组，不同测试场景快速切换
📋 官网信息
Chrome Web Store 搜索 "ModHeader"。基础功能免费，高级功能（多Profile同步）需要付费 $4.99/月。日常调试免费版完全够用。
🍪 EditThisCookie——Cookie管理神器
调试跟登录态相关的问题时，经常需要看Cookie、改Cookie、删Cookie。Chrome自带的Cookie管理藏得巨深——Settings → Privacy → Site Settings → All Sites → 搜索域名 → 展开 → 才能看到。找个Cookie要点五六下。
EditThisCookie直接在地址栏旁边加个图标，点一下就能看到当前域名所有Cookie，直接编辑值、设置过期时间、删除、新增。调试Token过期、Session失效这类问题的时候特别好用。
💡 核心功能
✅ 一键查看/编辑/删除当前站点所有Cookie
✅ 可以导入导出Cookie（JSON格式）
✅ 支持设置Cookie的domain、path、过期时间
✅ 一键清除所有Cookie（测试登出逻辑时好用）
📋 官网信息
Chrome Web Store 免费安装，搜索 "EditThisCookie"。完全免费，无付费功能限制。
🔄 Requestly——请求拦截和Mock数据
这个插件的功能比较强大，简单来说就是：你可以在浏览器层面拦截请求，修改URL、替换Response、添加延迟、重定向。不需要改后端代码就能模拟各种场景。
我用得最多的场景是：前端在开发，后端接口还没好。用Requestly配一个Mock规则，直接返回预设的JSON数据，前端不用干等。还有就是测试异常场景——把某个接口的响应改成500错误，看前端的错误处理逻辑对不对。
💡 核心功能
✅ Redirect Rules：把A请求重定向到B
✅ Mock Server：不依赖后端，直接返回预设数据
✅ Modify Headers/Query Params：动态修改请求参数
✅ Add Delay：模拟慢接口，测试前端loading状态
📋 官网信息
Chrome Web Store 搜索 "Requestly"。免费版支持最多50条规则，个人调试完全够用。团队版 $25/月。
📊 Lighthouse——前端性能一键体检
这个其实是Chrome DevTools内置的，但很多人不知道可以当插件用。打开F12 → Lighthouse面板，一键分析页面性能、可访问性、SEO、最佳实践四个维度的得分。
后端同学可能觉得这个跟自己没关系，但其实你写的接口如果返回的数据太大、图片没压缩、JS bundle没拆分，Lighthouse都会给你标出来。上次我们前端页面加载慢，就是Lighthouse指出一个接口返回了3MB的JSON数据——里面一半字段根本没用。
💡 核心功能
✅ Performance：页面加载时间、FCP、LCP等核心指标
✅ Accessibility：可访问性检查（对比度、aria标签等）
✅ SEO：meta标签、结构化数据检查
✅ Best Practices：图片格式、HTTPS、无控制台错误等
📋 官网信息
Chrome内置功能，无需安装。F12 → Lighthouse 面板直接使用。完全免费，Google官方出品。
最后说几句掏心窝的。工具这东西，不装不知道，装了真回不去。JSON Viewer解决看数据，ModHeader解决模拟请求，EditThisCookie解决Cookie管理，Requestly解决Mock拦截，Lighthouse解决性能分析——五个插件各管一摊，配合起来基本覆盖了日常调试的所有场景。
装插件不费事，十分钟搞定。但省下来的时间，是每天实打实的。
💬 互动话题
你调试时用什么Chrome插件？还有什么私藏的效率工具？
👉 评论区聊聊！
觉得有用？别忘了「三连」支持！
❤️ 点赞——给辛苦码字的作者加鸡腿！⭐ 收藏——装插件时翻出来！🔄 转发——让团队调试都更快！
关注我，获取更多开发效率提升干货
专注技术实战 · 分享效率工具 · 每周更新点击关注不迷路