效率工具
开发者浏览器插件推荐：调试、测试、效率提升
精选开发者必装的浏览器插件，涵盖前端调试、API测试、性能分析、效率提升等方面的实用工具。
#浏览器插件
#前端调试
#开发者工具
#Chrome插件
浏览器是前端开发的第二个IDE
作为Web开发者，浏览器不只是用来浏览网页的——它是你的调试器、性能分析器、设计检查器。装对插件，浏览器就能变成强大的开发工具。
前端框架调试工具
React Developer Tools
React开发必装。可以查看组件树、Props、State，还能profiling性能。
| 功能 | 说明 |
|---|---|
| Components面板 | 查看组件层级和Props |
| Profiler面板 | 性能分析、渲染追踪 |
| 高亮渲染 | 实时显示哪些组件在重渲染 |
| 搜索组件 | 快速定位组件 |
Vue.js Devtools
Vue开发者的对应工具。Vue 3版本支持Pinia状态管理、路由、性能分析等。
Angular DevTools
Angular官方出品，支持组件树浏览和变更检测分析。
Svelte DevTools
Svelte社区维护，功能在快速完善中。
网络和API调试
| 插件 | 用途 | 免费 |
|---|---|---|
| Requestly | 拦截和修改HTTP请求 | 免费/Pro $5/月 |
| ModHeader | 修改请求/响应头 | 免费 |
| JSON Viewer | 美化JSON响应 | 免费 |
| CORS Unblock | 临时解除CORS限制 | 免费 |
| Wappalyzer | 检测网站技术栈 | 免费 |
Requestly：请求拦截利器
Requestly可以做什么：
1. 修改请求头（添加Auth Token等）
2. 重定向请求（本地开发Mock）
3. 延迟请求（测试Loading状态）
4. 屏蔽请求（模拟网络错误）
5. 修改响应（模拟不同数据）CSS和设计工具
| 插件 | 用途 | 推荐指数 |
|---|---|---|
| ColorZilla | 页面取色器 | ★★★★★ |
| WhatFont | 识别页面字体 | ★★★★ |
| PerfectPixel | 像素级设计对比 | ★★★★ |
| CSS Peeper | CSS样式检查 | ★★★★ |
| Responsively | 多设备预览 | ★★★★★ |
| VisBug | 可视化CSS编辑 | ★★★★ |
VisBug：直接在页面上编辑CSS
VisBug是Google Chrome Lab出品的工具，可以直接在页面上拖拽、编辑元素的样式，非常直观。
VisBug功能：
- 拖拽移动元素
- 直接修改文字
- 调整边距和间距（可视化）
- 改变颜色
- 搜索DOM元素
- 检查可访问性性能分析工具
| 插件 | 关注点 | 免费 |
|---|---|---|
| Lighthouse | 综合性能评分 | 免费(内置) |
| Web Vitals | Core Web Vitals指标 | 免费 |
| Webhint | 最佳实践检查 | 免费 |
| Coverage | 未使用代码检测 | 免费(内置) |
Core Web Vitals是什么
| 指标 | 含义 | 良好标准 |
|---|---|---|
| LCP | 最大内容绘制 | < 2.5秒 |
| INP | 交互到下一次绘制 | < 200ms |
| CLS | 累积布局偏移 | < 0.1 |
// 用Web Vitals库在代码中监控
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log); // 最大内容绘制
onINP(console.log); // 交互延迟
onCLS(console.log); // 布局偏移效率工具
| 插件 | 用途 | 推荐指数 |
|---|---|---|
| Vimium | Vim风格浏览网页 | ★★★★★ |
| Octotree | GitHub代码树导航 | ★★★★★ |
| Refined GitHub | GitHub界面增强 | ★★★★ |
| GitKo | GitHub中文化 | ★★★ |
| Dark Reader | 全站暗色模式 | ★★★★ |
| uBlock Origin | 广告拦截 | ★★★★★ |
| Bitwarden | 密码管理 | ★★★★★ |
Vimium：像Vim一样浏览网页
如果你用Vim/Neovim，一定会爱上Vimium。
Vimium常用快捷键：
j/k - 上下滚动
d/u - 半页滚动
f - 显示链接标记，按键跳转
/ - 搜索
H/L - 前进/后退
J/K - 切换标签页
x - 关闭标签页
X - 恢复关闭的标签页
o - 打开URL/搜索Octotree：GitHub代码浏览必备
在GitHub页面左侧显示代码树，浏览大型仓库时不用反复点击文件夹。
安全和隐私工具
| 插件 | 用途 |
|---|---|
| HTTPS Everywhere | 强制HTTPS |
| Privacy Badger | 追踪器拦截 |
| uBlock Origin | 广告和恶意脚本拦截 |
| Bitwarden | 密码管理 |
我的插件清单
必装（日常开发）：
├── React Developer Tools
├── JSON Viewer
├── ColorZilla
├── Vimium
├── Octotree
├── uBlock Origin
└── Dark Reader
按需安装：
├── Requestly (API调试时)
├── PerfectPixel (还原设计稿时)
├── Wappalyzer (分析竞品时)
└── Web Vitals (性能优化时)Chrome DevTools隐藏技巧
其实Chrome自带的DevTools已经非常强大了，很多功能你可能没发现：
1. Cmd+Shift+P → 命令面板（类似VS Code）
2. Console中 $0 → 获取当前选中的DOM元素
3. Console中 copy() → 复制对象到剪贴板
4. Elements面板 Cmd+F → 搜索DOM（支持CSS选择器）
5. Network面板 → 右键 → Copy as cURL
6. Performance面板 → Screenshots → 逐帧分析
7. Application面板 → 管理Cookie/Storage浏览器选择
作为开发者，推荐同时安装多个浏览器进行测试：
| 浏览器 | 引擎 | DevTools | 推荐用途 |
|---|---|---|---|
| Chrome | Blink | 最强 | 主力开发 |
| Firefox | Gecko | 很好 | CSS调试 |
| Safari | WebKit | 基础 | iOS兼容测试 |
| Arc | Blink | Chrome的 | 日常使用 |
配合好的前端开发工具链和VS Code，你的前端开发效率会更上一层楼。想了解更多在线开发工具，也可以看我的另一篇文章。
总结
浏览器插件是前端开发者的军火库。但也不要装太多，太多插件会拖慢浏览器速度。建议只安装日常必需的，按需安装其他的。定期清理不再使用的插件，保持浏览器的清爽。