React 开发工具——像忍者一样调试

十大特点

1. 实时编辑状态/属性

2. 在树中搜索

3. 组件滤波器

4. 由……渲染

5. 所有者树

6. 快速导航

7. 实用工具

Profiler简介

8. 轮廓初始安装

9. 为什么会渲染这个？

10. 渲染于

毫无疑问，它过去console.log()是、现在是、将来也永远是最伟大的调试工具。

React 团队几周前发布了新版React Dev Tools (v4)，简直太棒了！它赋予你强大的调试能力，可以浏览代码树、追踪数据流、发现薄弱环节并进行性能优化。与旧版本只有一个 React 标签页不同，新版本
有两个独立的标签页（组件和性能分析器） 。

新版开发者工具相比旧版本有很多改进。以下仅列举几项——

• 🏎 更快
• 🎣 钩子支持
• 🧐 高级树木过滤器
• 🤠 更佳的搜索用户体验
• 👮‍♀️ HOC徽章
• 🎯 页面重新加载后仍记住选择

十大特点

开发者工具功能强大，我们不会深入探讨每个功能的细节。相反，我们将重点介绍10 个最实用的功能，它们可以帮助我们节省时间并编写更优质的 React 代码。

组件选项卡

1. 实时编辑状态/属性
2. 在树中搜索
3. 高级树过滤器
4. 由
5. 所有者树
6. 快速导航
7. 工具

分析器选项卡

1. 配置文件初始安装
2. 为什么会渲染这个？
3. 渲染于

1. 实时编辑状态/属性

您可以实时编辑组件的状态和属性，并立即在页面上看到结果。

由于gif图片已损坏，您可以在这里查看。

2. 在树中搜索

当您想要快速查找并跳转到组件树中的某个组件时，搜索栏非常方便。现在，开发者工具可以记住一些信息，因此选定的节点会在页面重新加载后保存，您无需每次重新加载页面时都重复此操作。

3. 组件滤波器

筛选器是一项强大的功能，可以减少视觉干扰，让您在庞大的树状结构中专注于当前最重要的信息。您可以使用多种筛选选项，例如上下文、高阶组件 (HOC)、宿主（DOM）节点、组件名称等。

4. 由……渲染

“渲染者”列表显示了渲染所选组件的所有所有者/父组件。您可以从列表中选择一个条目，快速跳转到相应的父组件。

5. 所有者树

所有者树让您可以清晰地查看特定组件及其子树，并隐藏组件树的其余部分。

要进入所有者树状视图，您必须双击树中的组件。

6. 快速导航

在“元素”选项卡（浏览器开发者工具）和“组件”选项卡（React 开发者工具）之间切换非常容易，并且这些选项卡中会自动选择相应的节点。

要在“元素”选项卡中查找对应的 DOM 节点，请选择组件，然后单击右侧窗格中的小眼睛图标。这将打开“元素”选项卡，并选中对应的 DOM 节点。

要在“元素”选项卡中查找对应的 React 节点，只需在“元素”选项卡中选择一个节点，然后单击“组件”选项卡。React 开发工具将自动选择相应的组件。

7. 实用工具

组件选项卡提供了三个实用的小工具。

1. 悬挂组件
2. 检查匹配的 DOM 元素
3. 将组件数据记录到控制台

悬挂组件

您可以轻松切换Suspense组件的等待（加载）状态和已解决状态。

检查匹配的 DOM 元素

我们在“快速导航”中已经见过这个功能。您可以选择一个组件，然后点击右侧窗格中的眼睛图标，即可跳转到“元素”选项卡中对应的节点进行检查。

将组件数据记录到控制台

这是一个方便实用的工具，可以将组件的全部元数据记录到控制台。日志会提供诸如属性、钩子、对应的 DOM 节点以及组件文件在文件系统中的位置等详细信息。

要将组件数据记录到控制台，请选择该组件，然后单击右侧窗格中的小虫图标。

Profiler简介

接下来的三个功能将与性能分析器相关。在深入探讨之前，我们将先了解性能分析器的工作原理以及性能分析过程中使用的关键指标。

每次分析过程都包含两个重要的颜色图表——

1. 提交图
2. 组件图

提交图

提交图会显示会话期间的所有提交（整个代码树）。每次提交都代表一次用户活动或副作用，触发了代码树中的一次渲染。提交图的颜色从橙色到绿色不等，橙色表示成本最高的提交（耗时最长），绿色表示成本最低的提交（耗时最短）。

组件图

组件图显示了单次提交期间渲染的组件信息。您可以从提交图中选择每次提交来查看其组件图。组件图还以颜色编码显示成本信息。

1. 深灰色——组件未渲染，但其子树的一部分已渲染。
2. 透明灰色—组件及其子树均未渲染
3. 彩色渲染——组件及其整个子树均已渲染。

8. 轮廓初始安装

在大多数 React 应用中，初始挂载和首次渲染通常是性能消耗巨大的操作。在旧版本的开发者工具中，无法对初始挂载阶段进行性能分析和审计。但最新版本提供了分析和审计初始挂载的选项。

9. 为什么会渲染这个？

这是开发者工具目前最强大的功能，它可以告诉你组件在性能分析会话期间渲染的原因。组件渲染的原因可能包括以下一个或多个方面——

1. 道具已更换
2. 状态已改变
3. 钩子变了
4. 父组件已渲染

您可以分析活动，并查看在分析会话期间渲染组件的原因，以发现薄弱环节并防止树中不必要的渲染。

注意：您必须选中此设置——“记录分析时每个组件的渲染原因”，才能在分析器选项卡的右侧窗格中查看此信息。

10. 渲染于

右侧窗格中的“渲染时间”信息会提供两个时间指标——

1. 在性能分析会话期间，组件究竟何时渲​​染的？
2. 在性能分析会话期间，组件渲染耗时多久

例如：2.2秒，持续2.3毫秒

这里，2.2s表示组件在性能分析会话开始（即0 秒）后2.2 秒（2200 毫秒）内渲染完成。而2.3ms则是组件渲染所花费的时间。

由于gif图片已损坏，您可以在这里查看。

就到这里了。

如果您有兴趣探索所有功能，React 团队专门为此构建了一个网站——交互式开发工具。

体验一下开发者工具，然后在下方留言或在Twitter上与作者交流你的想法。

本文转载自Thinkmill 博客的原文。