react 如何debug
使用 React DevTools 进行调试
安装 React DevTools 浏览器扩展（Chrome/Firefox），通过组件树查看组件的 props、state 和 hooks。选中组件后可直接在控制台修改 props 或 state 进行实时调试。
启用严格模式检测潜在问题
在应用根组件外包裹 <React.StrictMode>，React 会检测废弃 API、意外副作用等问题，并在控制台输出警告信息。
import React from 'react';
function App() {
return (
<React.StrictMode>
{/* 其他组件 */}
</React.StrictMode>
);
}利用浏览器断点调试
在源代码中添加 debugger 语句，或通过浏览器开发者工具的 Sources 面板直接设置断点。Chrome 的 "Pause on exceptions" 功能可自动捕获未处理的错误。
错误边界捕获组件错误
使用 ErrorBoundary 组件捕获子组件的 JavaScript 错误，避免整个应用崩溃：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error('Caught error:', error, info);
}
render() {
return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;
}
}
// 使用方式
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>性能分析工具
使用 React Profiler 或 Chrome Performance 面板记录组件渲染耗时。添加 profiler 组件收集性能数据：
import { Profiler } from 'react';
function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime
) {
console.log('Render metrics:', { actualDuration, baseDuration });
}
<Profiler id="MyComponent" onRender={onRenderCallback}>
<MyComponent />
</Profiler>控制台日志增强
使用 useDebugValue 在 DevTools 中显示自定义 Hook 的调试信息：
function useCustomHook() {
const [value] = useState(null);
useDebugValue(value ? 'Enabled' : 'Disabled');
return value;
}网络请求调试
对于涉及 API 调用的组件，使用浏览器 Network 面板监控请求/响应，或使用 Mock Service Worker (MSW) 进行请求拦截和模拟。
状态管理工具调试
Redux 应用可使用 Redux DevTools 查看 action 历史记录和状态变化。Zustand 等库也提供类似开发者工具支持。
测试驱动调试
编写单元测试（Jest + React Testing Library）和端到端测试（Cypress）捕获边界情况错误。测试失败时会直接定位问题代码位置。
