React Developer Tools

React Developer Tools 是开源 React JavaScript 库的 Chrome DevTools 扩展。它允许您在 Chrome 开发者工具中检查 React 组件层次结构。

插件说明

React Developer Tools 是开源 React JavaScript 库的 Chrome DevTools 扩展。它允许您在 Chrome 开发者工具中检查 React 组件层次结构。
您将在 Chrome DevTools 中看到两个新选项卡：“⚛️ Components”和“⚛️ Profiler”。
“组件”选项卡向您显示在页面上呈现的根 React 组件，以及它们最终呈现的子组件。
通过选择树中的组件之一，您可以在右侧面板中检查和编辑其当前的道具和状态。在面包屑中，您可以检查所选组件、创建该组件的组件、创建该组件的组件等等。
如果您使用常规“元素”选项卡检查页面上的 React 元素，然后切换到“React”选项卡，则该元素将在 React 树中自动选择。
Profiler 选项卡允许您记录性能信息。
React Developer Tools插图