react.js怎么调试代码

在 React.js 中调试代码的方法很多，下面从基础到进阶给你系统介绍一下，适合不同场景使用。

一、最常用：浏览器开发者工具 + React DevTools

1. 安装 React Developer Tools

• Chrome / Edge：扩展商店搜索 React Developer Tools
• 安装后，浏览器开发者工具里会多一个 ⚛ Components 面板

2. 能做什么

• 查看组件树
• 查看 props / state
• 直接修改 state 看 UI 变化
• 查看 hooks 状态（useState / useReducer）

✅ 这是 React 调试最核心工具

二、使用 console.log（最基础但有效）

function User({ name }) {
  console.log('User render', name);
  return <div>{name}</div>;
}

常见用法：

• 查看 props 是否正确
• 看组件是否重复渲染
• 在事件函数中打印参数

⚠ 注意：

• 不要在生产环境保留大量 console
• 可用 console.table() 看数组/对象

三、在 VS Code 中调试（断点调试）

1. 使用 Chrome + VS Code

launch.json 示例：

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug React",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src"
}

2. 打断点

• 在 .jsx / .tsx 文件行号处点一下
• 启动调试 → 浏览器自动打开
• 可以一步步执行代码

✅ 适合复杂逻辑调试

四、useEffect / 状态问题调试

useEffect 调试技巧

useEffect(() => {
  console.log('effect run', count);
}, [count]);

常见问题排查：

• effect 是否执行多次？
• 依赖数组是否正确？
• 是否有无限循环？

五、错误边界（捕获组件错误）

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error(error, info);
  }

  render() {
    return this.state.hasError ? <h1>出错了</h1> : this.props.children;
  }
}

六、常见调试场景速查

1. 页面不更新？

• state 是否是不可变更新？
• 是否用了错误依赖？
• 是否组件被 memo 拦截？

2. 事件不触发？

• onClick 是否写成 onClick={handleClick()} ❌
• 是否事件绑定在错误元素

3. 无限渲染？

• setState 在 render 中调用
• useEffect 依赖写错

七、推荐调试工具汇总

如果你愿意，可以告诉我：

• 你用的是 Vite / CRA / Next.js
• 是 函数组件还是 class 组件
• 具体遇到什么 bug

我可以给你更针对性的调试方案。