如何调试react
调试 React 应用的方法
使用 React Developer Tools
安装浏览器扩展（Chrome/Firefox），通过组件树查看组件状态、props 和 hooks。支持实时编辑 props 和状态，直接定位渲染问题。
控制台日志与断点
在组件生命周期或事件处理中添加 console.log。结合 Chrome DevTools 的 Sources 面板设置断点，逐步执行代码检查变量变化。
错误边界（Error Boundaries）
通过 componentDidCatch 捕获子组件错误，避免整个应用崩溃。示例代码：
class ErrorBoundary extends React.Component {
state = { hasError: false };
componentDidCatch(error, info) {
this.setState({ hasError: true });
console.error(error, info);
}
render() {
return this.state.hasError ? <FallbackUI /> : this.props.children;
}
}严格模式（Strict Mode）
启用 <React.StrictMode> 检测废弃 API 和副作用问题。开发环境下会重复渲染组件以暴露问题。
React 版本警告
检查控制台中的版本弃用警告，使用 npm outdated 确认依赖兼容性。升级到稳定版本修复已知问题。
性能分析工具
使用 React Profiler 或 Chrome Performance 标签记录组件渲染时间，优化不必要的重渲染。通过 React.memo 或 useMemo 减少计算开销。
网络请求调试
通过浏览器 Network 面板检查 API 调用，结合 axios 拦截器或 fetch 的 .catch 处理错误响应。Mock 数据工具（如 MSW）辅助测试。
状态管理工具集成
Redux 应用使用 Redux DevTools 跟踪 action 和状态变化。Zustand/Jotai 可通过中间件记录状态更新历史。
测试工具辅助
Jest 配合 @testing-library/react 编写单元测试，覆盖核心逻辑。错误场景使用 jest.spyOn 模拟异常。
热重载（HMR）问题排查
若代码修改未生效，检查 webpack 配置的 hot: true 选项。清除浏览器缓存或临时禁用 Fast Refresh。
环境变量验证
通过 console.log(process.env) 确认前端环境变量是否正确注入。避免敏感信息泄露到客户端。
第三方库冲突
通过 npm ls 分析依赖树，解决版本冲突。隔离测试第三方组件是否引发异常。
SSR/SSG 特定调试
Next.js 应用使用 next dev --debug 启动调试模式，查看服务端日志与客户端 hydration 是否匹配。
