react如何查

安装 React 开发工具

1. Chrome 扩展

   • 打开 Chrome 网上应用店
   • 搜索 "React Developer Tools"
   • 点击 "添加到 Chrome"

2. Firefox 扩展

   • 访问 Firefox Add-ons
   • 搜索相同名称
   • 点击安装

使用 React 开发工具

1. 组件检查

   • 打开浏览器开发者工具
   • 切换到 "Components" 选项卡
   • 查看组件树结构

2. Props 查看

   • 选择特定组件
   • 查看右侧面板显示的 props 数据

3. 状态调试

   

   • 定位有状态的组件
   • 观察 hooks 或 state 的当前值

其他调试方法

1. 控制台直接访问

   • 输入 $r 访问当前选中的组件实例
   • 查看组件方法和属性

2. 性能分析

   • 使用 "Profiler" 选项卡
   • 记录组件渲染性能

3. React 版本检测

   

   • 查看工具顶部显示的版本信息
   • 确认与项目使用的版本匹配

生产环境调试

1. 添加错误边界

   • 在代码中实现 Error Boundary
   • 捕获组件树错误

2. 启用开发模式

   • 临时修改生产环境配置
   • 获取更详细的错误信息

3. 使用源映射

   • 确保构建时生成 sourcemap
   • 在浏览器中调试原始代码