41. React 开发者工具

本节目标：装上 React DevTools，学会用组件树和 Profiler 排查问题和优化性能。

安装

React DevTools 是浏览器扩展，装一次就行：

Chrome：Chrome 网上应用店搜索 “React Developer Tools”
Firefox：Firefox 附加组件搜索 “React DevTools”
Edge：Edge 扩展商店搜索 “React Developer Tools”

装好之后，打开一个用 React 开发的网站，按 F12 打开开发者工具，会多出两个面板：Components 和 Profiler。

Note

如果面板没出现，检查一下网站是不是开发模式。生产环境的 React 会禁用 DevTools。本地 npm run dev 跑的都是开发模式。

Components 面板：看组件树

Components 面板显示当前页面的 React 组件树。你可以：

选中组件：点击树中的组件，右侧显示它的 props、state、hooks
查看 props：右侧面板直接看到组件接收的所有 props
编辑 props：双击 props 的值可以修改，组件会立即重新渲染
查看 Hooks：展开 Hooks 部分，看到每个 hook 的当前值

function UserCard({ name, age }) {
  const [isExpanded, setIsExpanded] = useState(false);
  // 在 DevTools 里能看到：
  // props: { name: "Alice", age: 28 }
  // state: isExpanded: false
  return <div onClick={() => setIsExpanded(!isExpanded)}>{name}</div>;
}

在 DevTools 里双击 age 改成 30，组件立即刷新。不用改代码就能看到不同数据的效果。

组件高亮

Components 面板顶部有个”眼睛”图标，开启后鼠标悬停在组件树上，页面上对应的 DOM 元素会高亮。反过来，页面上右键 → “检查”也能定位到对应的 React 组件。

这个功能在复杂页面里特别有用——你看到一个元素，想知道是哪个组件渲染的，点一下就找到了。

Profiler 面板：找性能问题

Profiler 是性能分析工具。操作流程：

点 Record 按钮开始录制
在页面上操作（点击、输入、滚动等）
点 Stop 停止录制
查看火焰图、排名图、提交列表

火焰图

火焰图显示每次提交的组件渲染情况。横轴是时间，纵轴是组件树。颜色越深（黄/红）表示渲染越慢。

App (1.2ms)
├── Header (0.3ms)
├── ProductList (8.5ms)  ← 红色，慢
│   ├── ProductCard (1.2ms)
│   ├── ProductCard (1.1ms)
│   └── ... (50 个 ProductCard)
└── Footer (0.2ms)

一眼看出 ProductList 是瓶颈。

排名图

排名图按渲染时间从高到低排列组件。适合快速找到最慢的组件。

提交列表

每次状态更新（commit）都会出现在提交列表里。点击某次提交，可以看到：

这次更新花了多少时间
哪些组件被渲染了
触发更新的原因（props 变化、state 变化等）

Tip

Profiler 录制时会有性能开销，所以测出来的时间比实际要慢。但相对快慢是准确的——哪个组件慢，Profiler 能告诉你。

实用技巧

过滤组件

Components 面板可以按名称过滤。输入 Button 只显示名字包含 Button 的组件。在大型应用里快速定位。

查看 Context

选中一个组件，右侧面板会显示它消费的所有 Context 和对应的值。不用在代码里加 console.log 就能看 Context 传了什么。

Hooks 的”为什么渲染”

React DevTools 有个”Why did this render”功能（需要开启）。选中组件后，右侧会显示触发这次渲染的原因：哪个 props 变了、哪个 state 变了、哪个 context 变了。

时间旅行调试

配合 useReducer，你可以在 Profiler 里看到每次 dispatch 的状态变化。虽然不是真正的”时间旅行”，但能帮你理解状态变化流程。

生产环境的限制

生产环境的 React 会压缩代码，组件名变成 a、b、c。DevTools 会尝试用 displayName 恢复原名：

const MyComponent = memo(function MyComponent() { /* ... */ });
MyComponent.displayName = 'MyComponent';  // 生产环境也能看到原名

React Compiler 会自动帮你加 displayName，不用手动写。

独立应用（非浏览器）

React Native 应用用 React Native DevTools，功能和浏览器版一样。Safari 等非 Chrome 系浏览器，可以用独立的 react-devtools npm 包：

npm install -g react-devtools
react-devtools

然后在网页的 <head> 里加上 <script src="http://localhost:8097"></script> 就能连接。

Warning

不要在生产环境加载 DevTools 脚本。它会让你的应用暴露内部结构，有安全风险。