如何在chrome开发工具安装react

安装 React 开发者工具扩展

打开 Chrome 网上应用商店，搜索 "React Developer Tools"，找到由 Facebook 开发的官方扩展，点击 "添加到 Chrome" 进行安装。

安装完成后，Chrome 右上角会出现 React 图标。访问使用 React 构建的网站时，图标会高亮显示，表示可以检查 React 组件结构。

使用 React 开发者工具

打开 Chrome 开发者工具（快捷键 F12 或 Ctrl+Shift+I），可以看到新增的 "Components" 和 "Profiler" 标签页。"Components" 用于查看组件树和状态，"Profiler" 用于性能分析。

在 "Components" 标签页中，可以浏览整个 React 组件层次结构，选中组件后右侧面板会显示其 props、state 和 hooks 信息。支持实时编辑 props 和 state 进行调试。

检查生产环境 React 应用

默认情况下开发者工具只能检测开发模式的 React 应用。对于生产环境应用，需要在 Chrome 开发者工具的 "Console" 标签页执行以下代码启用检测：

__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};

刷新页面后，React 开发者工具即可识别生产环境的 React 应用，但某些调试功能可能会受限。