React Developer Tools 是 React JavaScript 库的 Chrome DevTools 扩展。如果您正在处理 React.js 应用程序，这是一个非常有用的工具。此扩展将 React 调试工具添加到 Chrome 开发人员工具中。它可以帮助您检查和编辑构建页面的 React 组件树，并且对于每个组件，您可以检查 props、状态、钩子等。
React Developer 工具还可以帮助您了解在特定应用程序中是否使用了 React.js。它也可以在 Firefox 中使用。
如何添加扩展？
按照链接 React Developer Tools
- 点击添加到 Chrome 。
- 该工具已添加到您的 Chrome 中。
- 转到顶部右侧的“扩展”选项卡，单击它。在下拉菜单中，可以看到已添加扩展程序。
要删除扩展程序，您必须单击从 Chrome 中删除。
如何使用扩展？
检测应用程序是否使用 React.js
打开您要检查的应用程序，现在单击扩展选项卡，然后单击 React Developer Tools。如果扩展保持彩色，则意味着它是用 React.js 构建的，如果它是无色的，则意味着应用程序没有使用 React.js
检查和编辑 React 组件
在应用程序上，右键单击，从下拉列表中转到Inspect或键入Ctrl+Shift+I。它打开Chrome DevTools ，现在在顶部栏上单击双箭头，一个下拉菜单将像这样打开。
单击Components ，将显示 React Component 树。
在这里，可以检查、编辑道具、状态、了解结构。
同样，单击Profiler 。
单击分析器将允许您记录性能信息。