作为一名 Web 开发人员，浏览器是你的核心工具。合适的 Chrome 扩展程序可以显著加快调试、测试和开发的工作流程。以下是按使用场景整理的完整工具包。
调试与检查
| 扩展程序 | 适用场景 | 核心功能 |
|---|
| React Developer Tools | React 应用 | 检查组件树、props、state 和 hooks |
| Vue.js Devtools | Vue 应用 | 检查组件、Vuex store、事件和路由 |
| Redux DevTools | Redux 状态管理 | 时间旅行调试、动作重放 |
API 与网络
| 扩展程序 | 适用场景 | 核心功能 |
|---|
| Postman Interceptor | API 测试 | 捕获浏览器请求，同步 cookie/header |
| JSON Viewer | API 响应 | 原始 JSON 的可折叠树状视图 |
| ModHeader | Header 测试 | 实时修改 HTTP 请求/响应头 |
性能与 SEO
| 扩展程序 | 适用场景 | 核心功能 |
|---|
| Lighthouse | 审计 | 性能、可访问性、SEO 评分 |
| Web Vitals | Core Web Vitals | 实时 LCP、FID、CLS 指标 |
| Wappalyzer | 技术检测 | 识别任何网站使用的框架、CMS 和分析工具 |
CSS 与设计
| 扩展程序 | 适用场景 | 核心功能 |
|---|
| CSS Peeper | 样式检查 | 无需使用 DevTools 即可查看颜色、字体和尺寸 |
| ColorZilla | 取色 | 吸取任意颜色，获取 hex/RGB/HSL 值 |
| Responsive Viewer | 响应式设计 | 同时预览多种屏幕尺寸 |
实用工具
| 扩展程序 | 适用场景 | 核心功能 |
|---|
| EditThisCookie | Cookie 管理 | 查看、编辑、删除任意网站的 Cookie |
| XPath Helper | 网页抓取 | 提取并评估 XPath 表达式 |
| Regex Tester | 模式匹配 | 在浏览器中针对示例文本测试正则表达式 |
入门指南
请勿一次性安装所有扩展程序——建议从当前技术栈最相关的开始，并根据需要逐步添加。Chrome 扩展程序会占用内存，因此请保持启用状态的扩展程序精简。
浏览我们的 开发者工具分类 查看完整列表，或使用我们的 对比工具 来比较特定的扩展程序。