你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧

壹 ❀ 引

React Developer Tools 是 React 官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，props 排查等等场景都扮演者至关重要的角色；毋庸置疑，熟练使用React Developer Tools 能让你的日常开发更加高效。

而我对于目前前端团队同学做了随机调查，询问了大家对于 React Developer Tools 的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用React Developer Tools 全凭经验搜索，或者有使用但不多，日常还是会根据组件类名在项目中进行全局搜索。这样做当然也可以，但依旧会有如下几个问题：

  • 需要研发同学对于项目结构以及大部分组件足够清晰，这对于新入职的同学是一个挑战。

  • 某个方法名或者类名在项目中并不唯一（比如 handleClick 随处可见），这加大了定位的难度。

  • 未来组件库将采用css in js 模式，类名随机生成让类名定位的方式不再可能。

关爱团队成长，分享 React Developer Tools 非常有必要，于是就有了这篇文章。这篇文章带大家系统性了解React Developer Tools 这款插件，通过本文你将学会：

  • 挂起组件模拟组件加载缓慢场景
  • 快速定位组件所对应的真实 dom。
  • 快速定位组件 props 中某个函数在何处创建。
  • 无需改代码， props 在线交互感知组件变化。
  • 2 种方式快速定位组件在哪个文件被创建。
  • 4 种方式定位组件在哪个文件被使用（精确到行）。
  • 过滤无意义组件层让组件结构更清晰
  • 了解组件无效渲染严重层度

当然，你应该先去chrome 商店安装这款浏览器插件，注意，它只会对 React 所写的页面生效，在刷新页面后，你会发现控制台多出了 Components 与 Profiles 两个选项，本文着重介绍 Components ，关于 Profiles 将在性能篇单独探讨。

贰 ❀ 你应该知道的 React Developer Tools

贰 ❀ 壹 挂起组件模拟组件加载缓慢场景

我们常常用 React.lazy 来懒加载组件，以避免组件未使用而被提前加载。但如果使用 React.lazy 我们还得结合 React.Suspense 来处理当组件还未准备好的兜底场景，所以你常常看到类似如下的代码：

const Button = React.lazy(() => import("./Button"));

// 当 Button 组件为准备好，我们展示 Loading...
<React.Suspense fallback="Loading...">
    <Button />
</React.Suspense>

而事实上当 Button 组件加载过快，你根本无法感知 Loading 效果，那假设我现在要调试 Loading （它可能是一个其它组件）是否正常怎么办呢？这时候我们就能使用手动挂起组件，先点击你要挂起的组件，再点击对应的图标，如下图：

贰 ❀ 贰 快速定位组件对应的真实DOM

日常开发中我们常常会遇到要修改组件样式的问题，那么如何找到组件所对应的真实 DOM 呢？查找类名是一种办法，其实还有更简单的办法，操作如下:

当然，也许它定位的仍然不是你所希望的具体节点，但起码它能帮你将 DOM 的节点范围进一步缩小，让你更快找到你希望看到的节点。

贰 ❀ 叁 定位组件 props 中某个函数在何处创建。

我们常常会遇到需要查找某个组件 props 中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像 handleClick这么常见，搜索也非常麻烦，我们可以通过 < > Go to definition 快速知晓：

这样你就知道这个方法是在哪个文件所创建，复制文件的路径去编辑器搜一下马上就可以定位到了。是不是比搜方法名要快得多呢？

贰 ❀ 肆 props 在线交互

我们常常遇到某个组件的 props 传递没达到预期的情况，你需要排查某个属性是否达到了你想要的效果，这个时候在线修改 props 比你去改代码然后触发构建要快得多，比如我直接修改 Button 的 type 类型，然后你发现按钮背景色变了。

类似的场景非常多，比如我们需要看遮罩层显示隐藏，让 list 下拉默认展示出来等等，我们都能通过此方法达到效果。

除了直接修改 props，我们还能把 props 保存到控制台操作，比如有时候我们没办法查看源码，但你又希望知晓某个方法的执行是否符合你的预期，这时候你能这么做：

比如上图我并未点击按钮，单纯通过控制台执行了 setState 让数字增1。

贰 ❀ 伍 2 种方式快速定位组件在哪个文件被创建。

针对于找一个组件在哪，常见有两种场景：

  • 某个组件可能有 bug，因此我想知道这个组件在哪定义方便去修改。
  • 某个页面的组件有bug，怀疑是 props 传递有问题，因此我想知道在这个组件在哪里被使用。

我们先说怎么知道一个组件被定义在哪，方法 1 非常简单：

第二种办法稍微麻烦点，我们能在控制台直接输出组件完整的信息，其中就包含组件声明的文件路径，具体操作如下：

点击控制台输出组件信息的图标，点开 nodes ，点开 __reactFiber 前缀，找到 _debugSource 即可。

贰 ❀ 陆 4 种方式快速定位组件在哪个文件被使用（精确到行）

方式一，直接看 source 信息，它会直接告诉你在哪个文件的多少行：

方式二，一键自动打开 vscode 并跳转到对应行数，先看效果：

有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制 vscode://file/{path}:{line} 到下图位置即可：

注意，此配置因项目复杂度可能有失效的情况，目前我测试了 windows 以及 mac 双环境下 create-react-app 项目均能正常跳转，mac 用户请保证 vscode 安装目录在 application 下，而不是下载目录中，这能减少很多不必要的麻烦。

方式三，同样通过控制台输出组件信息，可以看到使用的文件以及行数都有输出，如下：

贰 ❀ 柒 过滤无意义组件层让组件结构更清晰

事实上，组件开发因为ref以及context等等的嵌套，会让插件中的组件结构过于臃肿，而这些层级往往是你不需要关注的，因此你可以通过过滤配置来屏蔽一些无意义的层级，比如：

贰 ❀ 捌 了解组件无效渲染严重层度

虽然目前项目还未对组件无效渲染提出要求，不过我们还是能通过如下配置知晓每个组件的渲染情况，如下：

当开启渲染高亮后，之后我们的每次操作，只要涉及到 render 的组件都会有一个颜色的框框标注出来，而渲染的维度涉及两个方面：

  • 颜色，只有绿色或者黄色，绿色表示渲染次数很少，颜色越偏黄说明渲染越多。
  • 框框持续时间，如果高亮迟迟不消失，也说明渲无效渲染持续非常久。

先了解这两点，至于如何排查无效渲染，我们另起一篇文章再说。

叁 ❀ 总

那么到这里，我们基本介绍了 React Developer Tools 你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具 Profiler 在性能优化篇我们再单独探讨，敬请期待。

Tags:

VirMach 便宜 VPS

QNews

QNews