Chrome 安装 React Developer Tools：Components 和 Profiler 面板怎么打开

开发 React 项目时，控制台经常会提示安装 React Developer Tools。这个扩展不是必须安装，但装上以后，看组件树、props、state、hooks 和渲染性能会方便很多。

这篇简单记录一下 Chrome 里的安装和排查方式。

安装入口

优先从 Chrome Web Store 安装官方扩展：

• React Developer Tools

打开页面后，点击右上角的“添加至 Chrome”，再确认“添加扩展程序”即可。

如果 Chrome Web Store 打不开，可以先检查网络或代理。扩展类工具优先走官方商店安装，避免下载来路不明的离线包。

怎么确认装好了

安装完成后，打开一个 React 页面，然后打开 Chrome DevTools：

Cmd + Option + I

Windows 或 Linux 通常是：

Ctrl + Shift + I

DevTools 顶部会多出两个面板：

• Components：查看 React 组件树、props、state、hooks。
• Profiler：记录组件渲染过程，排查重复渲染和性能问题。

如果顶部没有看到这两个面板，点 DevTools 顶部右侧的 >>，有时面板被折叠在更多菜单里。

Components 面板能看什么

Components 适合排查组件状态和传参问题。

常见用法包括：

• 找到当前页面对应的 React 组件。
• 查看组件收到的 props。
• 查看 hooks 里的 state。
• 判断某个状态到底来自父组件、store，还是组件内部。
• 临时修改 props 或 state，观察页面变化。

它比直接在 DOM 面板里翻 HTML 更接近 React 的思维方式。

Profiler 面板什么时候用

Profiler 主要用于性能排查，不是每次开发都要打开。

适合这些场景：

• 输入框一打字页面就卡。
• 切换 tab、筛选列表时明显慢。
• 一个小状态变化导致大面积组件重新渲染。
• 想判断 memo、useMemo、useCallback 有没有实际收益。

使用方式也简单：点录制，操作页面，再停止录制，看哪些组件渲染耗时明显。

装了还是看不到怎么办

可以按这个顺序排查：

1. 确认当前页面真的是 React 应用。
2. 刷新页面，再重新打开 DevTools。
3. 在 DevTools 顶部点 >> 查找隐藏面板。
4. 进入 chrome://extensions/，确认 React Developer Tools 已启用。
5. 如果是本地页面或特殊协议页面，检查扩展详情里的站点访问权限。
6. 如果页面是生产环境构建，有些调试信息会比开发环境少，这是正常的。

如果扩展图标变灰，不一定是坏了，可能只是当前页面没有检测到 React。

小结

React Developer Tools 是 React 开发里很值得装的 Chrome 扩展。

日常开发主要看 Components，排查渲染性能时再用 Profiler。如果安装后没有看到面板，先确认页面是不是 React 应用，再检查 DevTools 隐藏面板和扩展启用状态。

这类扩展建议从官方 Chrome Web Store 安装，别随便找第三方离线包。