HOW - React Developer Tools 调试器

参考文档：

• React调试利器：React DevTools
• How to Use React Dev Tools – With Example Code and Videos

React Developer Tools

当你在开发一个 React 项目时，最简单的调试方式之一就是使用 React 开发者工具，React Developer Tools。

React Dev Tools 是由 React 团队开发的一款浏览器扩展，它允许开发者在浏览器的开发者工具中调试他们的代码。

使用

安装该扩展后，你会在开发者工具中看到两个新的标签页，分别是 Components（组件）和 Profiler（性能分析器）。

Components：

Profiler：

要使用该扩展的全部功能，你需要处于开发模式。这是因为在生产模式下，组件的名称会被替换为字母，这样你就无法对组件进行性能分析。

Components 功能特性

“Components” 标签页允许你在开发者工具中调试代码，并提供多种功能。让我们一一介绍这些功能：

1. 查看和编辑 props/state/hooks

可以帮助你查找组件，并在开发者工具中查看它对应的 props 和 state，而无需单独在控制台中打印它们。

你可以直接编辑组件的 props 或 state：这可以帮助你实时地查看变更效果，而无需重新加载或刷新网页。上面是一个示例视频，展示了它的使用方式。

2. 查找组件

你可以在整个应用中轻松搜索组件，只需在提供的搜索栏中输入组件名称。它会显示所有与关键词匹配的相关组件，之后你可以在匹配结果之间进行导航。

3. 检查组件树

在调试时，了解是哪些父组件导致子组件重新渲染是非常重要的。而直接在代码中查找这些信息有时会非常繁琐。React Dev Tools 中的 “rendered by”（渲染来源）部分能让这一过程变得更加简单，它会在一个地方列出所有相关的父组件。

4. 打印组件信息

如图示右侧，支持 Logging a component’s data in the console.

有些开发者喜欢在控制台中工作，而这个功能允许你只需点击一次，就能将组件的所有数据输出到控制台。它会展示该组件的所有相关信息，比如接收到的 props、使用的 hooks、在 DOM 中的节点位置，以及该组件在你本地系统中的文件路径。

5. 检查子组件

就像检查父组件在代码中并不总是容易一样，检查子组件也有类似的问题。

为了解决这个问题，你可以双击组件名称，这样就可以一次性查看目标组件内部的所有子组件，将以高亮的形式。

Profiler 功能特性

这个标签页允许你测试组件的性能，并显示哪些组件需要关注以进行优化。

要检查网页的性能，你只需按照以下步骤操作：

1. 点击记录按钮。
2. 使用你的网页，让性能分析器能够分析组件的渲染情况。
3. 再次点击记录按钮以结束录制。
4. 出现如下结果

如上所示，截图中标记了几个部分。让我们一一介绍它们：

• A 是记录按钮，它可以帮助你录制性能分析会话。
• B 是刷新按钮，它可以帮助你刷新页面以重新开始会话。
• C 是清除按钮，它可以帮助你清除性能分析会话的结果。
• D 是 Commit Chart，它会显示会话期间的 commits list。
• E 是组件列表，它会显示在会话期间渲染的组件。
• F 是 Flame Chart 火焰图按钮，它会像 E 一样显示组件列表。
• G 是 Ranked Chart 排名图按钮，它会按排名方式显示组件列表。如下图
  

现在让我们深入了解这个标签页中的不同功能，以及如何检查网页的性能。

Commit Chart

commit chart 显示了会话期间的提交列表。如上图所示，在 D 部分，有 33 根条形图。这些条形图代表会话中的 33 次提交。每次提交都会显示一个副作用，导致 DOM 更新。

你可以在这些条形图之间切换，分别查看每个提交的详情。

Flame Chart 火焰图

火焰图显示了在一次提交中渲染的组件列表。如上面图示，当你点击标记为 F 的部分时，E 部分中的所有横向条形图代表第一次提交中的不同组件。

火焰图可以分析哪些组件花费了更多的时间来渲染。请注意，火焰图还会显示：

1. 组件渲染的确切时间。
2. 组件在性能分析会话中渲染所花费的时间。

例如，在下图中，SpaceCard 组件在 1.5 秒时渲染，并且渲染时间为 6.1 毫秒。

Ranked Chart 排名图

当你点击 G 部分所示的排名图标时，你将看到一个组件的图表视图。这个视图是按降序排列的，也就是说，花费最多时间渲染的组件会位于顶部，而花费最少时间渲染的组件会位于底部。

注意：你可以通过在 “Profiler” 标签页的设置中启用 “Record why each component rendered while profiling” 复选框来获取更多关于为何组件渲染的信息。以下是附带的参考图片：

React Dev Tools 是一个非常棒的扩展，适用于你在开发 React 应用时使用。它们可以帮助你轻松调试代码，并找出应用中的性能瓶颈。

why-did-you-render

有时，组件会重新渲染，但无法立即查明原因。虽然 React DevTools 很有用，但在大型应用中，它可能只会提供模糊的解释，例如“hook #1 已渲染”，这可能是无用的。

在这种情况下，你可以求助于 why-did-you-render 库。