React Developer Tools(简称 Devtools)是 Chrome 和 Firefox 的浏览器扩展,它提供了一组额外的 React 特定的检查小部件来帮助您进行开发。通过安装 React Devtools,您将获得两个主要功能:组件树的视图以及您选择的每个组件的当前状态和道具。

让我们调试吧!

入门

要安装 React Devtools,请访问您选择的浏览器的扩展页面——Chrome或Firefox——然后找到安装按钮。

本教程中的图像是从 Chrome 中捕获的,但 Firefox 版本没有显着差异。如果您使用不同的浏览器,或者可能需要检查 React Native 应用程序,React Devtools 可作为独立应用程序使用。您可以在此处阅读有关的更多信息。

安装后,扩展不需要进一步设置。如果您发现自己无法访问该工具包,请尝试重新打开浏览器或通过单击地址栏旁边的 React 徽标来验证 Devtools 是否可以访问页面上的 React 实例:

检查您的应用程序

打开 React Devtools 的最快方法是右键单击您的页面并选择检查。

在浏览器的检查窗口中,选择 React 选项卡,您应该会看到应用程序组件层次结构的视图:

如果您使用过 Chrome 或 Firefox 的开发者工具,那么您应该对这个视图有点熟悉。我们应用程序的组件树视图类似于您在Elements选项卡上看到的纯 HTML 树,但有一些改进:

• 我们的 React 元素显示在纯 HTML 元素旁边并且是可选择的。

• 选定的 React 元素具有实例状态和道具的实时视图(如右图所示)。这非常适合调试!

• 底部的选项卡表示从树顶部到我们选定元素的路径。在这种情况下,MyComponent是div的子代,即App的子代。

额外功能

内联元素选择

与 Chrome 和 Firefox 中的纯 HTML 元素选择功能非常相似,React Devtools 具有在页面上选择 React 组件的功能。单击靶心按钮,然后在页面上选择一个元素:

您会注意到我们无法直接选择 MyComponent,但我们可以使用选择工具非常接近。

搜索

如果您的组件树很高或很复杂,搜索功能就会派上用场。

控制台调试

React Devtools 中一个经常被忽视的特性是能够访问 JavaScript 控制台中的选定元素。注意组件树中选定元素旁边的$r——这是我们可以用来访问实例的变量的名称:

最后的想法

让调试 React 应用程序对某些人来说很困难的事情也让其他人变得轻而易举。在大多数情况下,被动调试只是意味着仔细检查应用程序的状态或视图。

掌握 React Devtools 中的功能是同时完成这两项任务的高效方法。