react如何debugger
使用 Chrome DevTools 调试 React 应用
在 Chrome 浏览器中打开开发者工具（快捷键 F12 或 Ctrl+Shift+I），切换到 Sources 选项卡。找到对应的 React 组件文件（通常位于 webpack:// 目录下），直接设置断点。React 组件代码会像普通 JavaScript 代码一样支持断点调试。
确保启用 Pause on exceptions（异常暂停）功能，可以捕获未处理的错误。在 Components 和 Profiler 选项卡中，可以查看组件树和性能分析。
使用 React Developer Tools 扩展
安装官方 Chrome 扩展 React Developer Tools。扩展会添加 Components 和 Profiler 面板，支持查看组件 props、state、hooks，以及手动触发组件重新渲染。
选中组件后，可以通过 $r 在控制台直接访问组件实例，动态修改 props 或调用方法。在 Profiler 面板中记录交互过程，分析组件渲染性能。
利用 debugger 语句
在代码中直接插入 debugger 语句，浏览器执行到该行时会自动暂停：
function MyComponent() {
const [count, setCount] = useState(0);
debugger; // 执行到此行时暂停
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}结合条件判断可针对性调试：
if (count > 5) {
debugger; // 仅当 count > 5 时触发
}日志输出与错误边界
使用 console.log 输出关键数据，或通过 console.table 格式化显示对象：
console.table([{ prop: 'value', count: 1 }]);为捕获组件树错误，实现 ErrorBoundary：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error('Error:', error, 'Info:', info.componentStack);
}
render() {
return this.state.hasError ? <FallbackUI /> : this.props.children;
}
}使用 VS Code 调试配置
在 .vscode/launch.json 中配置调试器：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Debug React App",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}启动调试会话后，可直接在 VS Code 中设置断点，无需切换浏览器。
性能优化调试
使用 React.memo 和 useMemo 减少不必要的渲染：
const MemoizedComponent = React.memo(({ data }) => {
return <div>{data}</div>;
});
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);通过 why-did-you-render 库检测冗余渲染：
npm install @welldone-software/why-did-you-renderimport whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React, { trackAllPureComponents: true });
