大多数 Web 开发者最终留下来的 Chrome 插件可以分为五类：框架调试工具（React、Vue、Angular、Redux）、无障碍检测工具（axe DevTools、WAVE）、页面检查工具（Web Developer、WhatFont、ColorZilla、Wappalyzer）、一个手机视图预览工具，以及几个小工具。只安装每周都会用到的插件，因为每个插件都会申请权限，也可能拖慢浏览器。下面逐一说明，每个插件能做哪些 Chrome DevTools 本身做不到的事。
说明：手机视图部分提到的 Mobile View Extension 是我们开发的。其他插件均来自其他开发者，入选是因为它们确实填补了空白。
先看看 Chrome DevTools 已经能做什么
安装任何插件之前，先了解浏览器自带了哪些功能。Chrome DevTools 包含元素和 CSS 检查、JavaScript 调试器、网络和性能录制、移动设备模拟（教程）、修改 User Agent（教程）、Lighthouse 审计（教程）、Styles 面板中的取色器和对比度检查，以及 CSS Overview。很多老牌的“Web 开发者”插件其实和这些功能重复。内置面板的介绍见我们的 Chrome 开发者工具教程。
框架调试工具
| 插件 | 开发方 | 新增功能 |
|---|---|---|
| React Developer Tools | Meta（React 团队） | Components 和 Profiler 面板：查看 props、state 和 hooks，定位渲染慢的组件 |
| Vue.js devtools | Vue 团队 | 组件树、Pinia 状态、路由和时间线 |
| Angular DevTools | Angular 团队 | 组件浏览器和变更检测分析器 |
| Redux DevTools | Redux 维护者 | Action 日志、状态 diff，以及适用于 Redux 和兼容 store 的时间旅行调试 |
安装与你所用框架对应的那一个即可。它们只在使用该框架的页面上启用。
无障碍检测工具
axe DevTools（Deque 出品）会在 DevTools 中添加一个面板，扫描页面上的 WCAG 问题，例如缺少标签、对比度不足和 ARIA 错误，并附上说明和规则链接。免费版即可进行自动扫描。
WAVE（WebAIM 出品）直接在页面上叠加图标，标出每个错误、警告和结构元素的位置。向设计师和内容编辑解释问题时特别直观。
自动检测只能发现一部分无障碍问题，还需要配合键盘操作测试和屏幕阅读器测试。
页面检查工具
Web Developer（Chris Pederick 开发）是一款历史悠久的工具栏，包含数百个小功能：禁用 CSS 或 JavaScript、为元素加轮廓、显示图片 alt 文本、查看表单详情等。其中很多功能在 DevTools 里也能找到，但工具栏让它们一键可用。
WhatFont 可以识别鼠标悬停处文字的字体，包括实际生效的备用字体。
ColorZilla 提供吸管工具，可以从页面任意位置取色，还带有颜色历史和渐变生成器。
Wappalyzer 显示网站所用的技术：CMS、框架、统计工具和托管服务。适合做竞品调研，或在项目开始前了解客户的技术栈。
手机视图与响应式测试
DevTools 的设备模式功能强大，但每个标签页都要操作好几步，而且会占用大半个屏幕。如果你每天要多次检查移动端布局，专门的插件能省下不少时间。
Mobile View Extension 会在手机或平板的外框中重新加载当前标签页，并使用对应设备的 User Agent、Client Hints、屏幕尺寸和像素比。你可以选择 Apple 和 Android 机型预设或输入自定义分辨率，切换横屏，并把带外框的画面保存为 PNG 截图。它支持 localhost，切换页面时保持开启，也不收集浏览数据。它的局限和大多数浏览器内预览一样：只能用鼠标操作，不会产生触摸事件，hover、pointer 等媒体查询也没有完全模拟。详细对比见手机模拟插件与 DevTools 对比。
实用小工具
JSON 查看器插件会在你打开 API 地址时，把原始 JSON 格式化成可折叠的树形结构。Chrome 默认只显示纯文本。
User Agent 切换插件适合经常测试设备识别或特定浏览器代码的场景。建议先阅读 User Agent Switcher 的作用；如果是检查移动端布局，手机视图工具更合适。
如何判断插件是否安全
开发者插件经常申请“访问所有网站”的权限，这意味着它们可以读取和修改你打开的任何页面，包括后台管理页面和邮箱。安装前请检查：
- 看发布者。 框架调试工具应当来自该框架的官方团队。
- 看权限。 在 Chrome 应用商店的详情页查看。一个识别字体的工具不需要访问你的下载内容。
- 看隐私政策。 其中应写明收集哪些数据。对大多数开发者工具来说，“不收集任何数据”才是理想答案。
- 看最近更新时间。 无人维护的插件会在 Chrome 更新后失效，也收不到安全修复。
- 留意所有者变更。 热门插件有时会被转卖，随后开始插入广告。如果某个插件的行为突然变化，请立即删除。
如果想把开发插件与日常浏览分开，可以单独建一个用于开发的 Chrome 个人资料。
最精简的入门组合
如果你在配置一台新电脑，可以从这些开始：
- 你所用框架的调试工具
- axe DevTools 或 WAVE
- 一个手机视图插件
- 如果经常和设计打交道，再加上 WhatFont 或 ColorZilla
其余插件，等你发现自己在反复做某件它们能解决的事时再装。
常见问题
对 Web 开发者来说，最有用的 Chrome 插件是哪个？
你所用框架的调试工具，因为 Chrome 本身没有替代品。其次，对大多数前端开发者帮助最大的是无障碍检测工具和手机视图工具。
Chrome 插件会拖慢浏览器吗？
每个插件都会占用内存，并可能在每个页面上运行脚本。几个做得好的插件几乎没有影响，但装上几十个就会拖慢页面加载和 DevTools。不用的插件请停用。
Lighthouse 是插件吗？
Lighthouse 以面板形式内置在 Chrome DevTools 中。另外也有独立的 Lighthouse 插件，但通常直接在 DevTools 里运行。