應用截圖

詳細介紹

为 Chrome 开发者工具添加 React 调试工具。 基于修订版本 1d34f91dfd 创建。 React Developer Tools 是用于开源 React JavaScript 库的 Chrome DevTools 扩展程序。它让您可以在 Chrome 开发者工具中检查 React 组件层级结构。 您的 Chrome DevTools 中会新增两个标签页：“Components ⚛”和“Profiler ⚛”。 Components 标签页会显示页面上渲染的根 React 组件，以及这些组件最终渲染的子组件。 选择组件树中的某个组件后，您可以在右侧面板中检查并编辑其当前的 props 和 state。在面包屑导航中，您可以检查所选组件、创建它的组件、创建后者的组件，依此类推。 如果您使用常规的 Elements 标签页检查页面上的某个 React 元素，再切换到 React 标签页，该元素会自动在 React 树中被选中。 Profiler 标签页允许您记录性能信息。 此扩展程序需要访问页面 React 树的权限，但不会远程传输任何数据。它完全开源，您可以在 https://github.com/facebook/react/tree/main/packages/react-devtools-extensions 查看其源代码。