前端神器！每位开发者都必须要知道的十个浏览器扩展
Hello，大家好，我是 Sunday。
作为前端开发，我们每天要打开无数个网页：调 API、调样式、看日志、对比线上线下环境……
时间久了你就会发现，浏览器其实才是我们用得最多的开发工具。
但是，光有浏览器还不够。咱们还需要一些扩展工具，才可以真正的提升效率。
所以，今天这篇文章我整理了 10 个前端必备的浏览器扩展，从 React、Vue 调试，到 API 抓包、页面优化，应有尽有。
1. React DevTools
图片
如果你平时写 React，这个扩展必须装。 它能让你在浏览器里直接看到 组件树，随时查看 props / state / hooks / context 的变化，还能帮你追踪组件的渲染情况。
很多人常遇到的问题是： “为什么我的组件不停地重新渲染？” 有了 React DevTools，你能立刻找到罪魁祸首。
获取方式： Chrome / Firefox / Edge 插件市场，搜索 “React Developer Tools” 即可。
2. Vue DevTools
图片
如果你是 Vue 开发者，这个扩展就是标配。
它能让你在浏览器里清晰地看到 组件层级，实时查看 ref / reactive 的数据变化，还支持调试 Pinia / Vuex 状态管理，甚至能跟踪路由变化和性能表现。
写 Vue 项目时，很多同学喜欢疯狂打 console.log 去看数据变化，有了 Vue DevTools，你直接在面板里就能一眼看透。
获取方式： Chrome / Firefox 官方插件商店，搜索 “Vue.js devtools”。
3. JSON Viewer Pro
图片
调 API 的时候，返回一坨压缩的 JSON 数据，光看就让人头晕。
装上 JSON Viewer 之后，响应会被自动格式化，高亮显示，还能折叠/展开嵌套字段。
这意味着：
查找字段更轻松漏掉的 key 一眼就能发现不用再手动复制到 VS Code 去排版适合经常和 REST API 打交道的前端同学。
获取方式： Chrome 商店搜索 “JSON Formatter” 或 “JSON Viewer”。
4. Wappalyzer
图片
有没有好奇过某个网站到底是用什么框架写的？
Wappalyzer 一点开就能告诉你：它是 React 还是 Vue，后端是 Node 还是 PHP，甚至能识别 CMS、统计工具、CDN、服务器环境。
想要“偷学”别人的网站技术，这个插件，直接安装起来
获取方式： Chrome / Firefox 商店直接搜索 “Wappalyzer”。
5. Lighthouse
图片
这是 Google 官方出品的性能检测工具。
它能帮你对网站做一次「体检」，包括：性能、可访问性、SEO、最佳实践。
跑一遍报告，你能立刻知道：
页面加载是不是太慢有没有缺少关键的 meta 标签无障碍评分是不是拖了后腿很多团队在做性能优化前，第一步就是跑 Lighthouse，看哪里拖了后腿。
获取方式：
直接在 Chrome DevTools → Lighthouse 里运行或者安装扩展，一键生成报告6. Web Developer
图片
这是前端人几乎人手一个的。
它提供了一整套快捷功能，比如：
一键禁用 JavaScript / CSS给页面元素加边框轮廓检查图片大小 / 缺失 alt 标签验证 HTML 语法平时调试页面时特别方便，
比如你怀疑某个问题是 CSS 导致的，点一下就能直接禁用所有样式。
获取方式： Chrome / Firefox 商店搜索 “Web Developer”。
7. User-Agent Switcher
图片
做前端一定绕不开一个问题：不同设备、不同浏览器下页面表现不一样。
User-Agent Switcher 可以一键修改 UA，让你快速模拟成 iPhone、Android、微信内置浏览器，甚至是搜索引擎爬虫。
常见的用法有：
验证移动端跳转逻辑是否生效模拟爬虫 UA 看站点 SEO 展现测试不同浏览器 UA 的兼容情况获取方式： Chrome / Firefox 商店搜索 “User-Agent Switcher”。
8. Dark Reader
图片
熬夜写代码的同学应该都懂，半夜盯着一片雪白的网页，眼睛直接被亮瞎。
Dark Reader 可以给所有网站一键加上暗黑模式，而且支持调整亮度、对比度，甚至可以针对单个网站开启或关闭。
除了护眼，它还有一个隐藏好处：有些网站的样式只有在深色主题下才会暴露问题，Dark Reader 正好帮你提前踩坑。
获取方式： Chrome / Firefox 商店搜索 “Dark Reader”。
9. Tab Manager Plus
图片
作为前端，打开三四十个标签页是家常便饭：本地项目、接口文档、调试页面、参考资料……最后总是忘了哪个是自己的本地 3000 端口。
Tab Manager Plus 可以帮你：
可视化展示所有标签页快速搜索 / 关闭 / 分组用快捷键一键切换从此告别“满屏 tab 找不到”的痛苦。
获取方式： Chrome 商店搜索 “Tab Manager Plus”。
10. Postman Interceptor 或者 apifox
图片
图片
调试接口的时候，很多请求都依赖浏览器里的 Cookie / Header。
如果你直接用 Postman 或者 apifox，往往得自己手动复制粘贴一大堆 Token，非常麻烦。
装上 Postman Interceptor 之后，Postman 可以直接拦截浏览器的请求，把 Cookie 和 Header 自动带过来。
这意味着：
登录态接口一键就能测不用再来回切浏览器和 PostmanAPI 调试效率直接翻倍获取方式： Chrome 商店搜索 “Postman Interceptor”。
