react.js如何调试代码

在 React.js 中调试代码的方法很多，下面按常用程度和场景给你一个系统性的总结，从最基础到进阶都有。

一、最基础：浏览器控制台（Console）

适用于：查看报错、打印变量

console.log('props', props);
console.log('state', this.state);

常用 API：

console.warn()
console.error()
console.table()

✅ 优点：简单直接
❌ 缺点：不够直观，刷新后丢失

二、使用浏览器开发者工具（DevTools）

1️⃣ Sources 面板打断点

• 打开 Chrome DevTools
• Sources → 找到你的 JS 文件
• 点击行号打断点
• 刷新页面，逐步执行

适合调试：

• 函数执行流程
• 变量变化过程

三、React Developer Tools（强烈推荐）

安装

• Chrome 插件：React Developer Tools
• Firefox 插件同样支持

功能

• 查看组件树
• 查看 props / state
• 实时修改 state 看 UI 变化
• 查看 hooks（useState / useEffect 等）

✅ 这是 React 调试的“必备工具”

四、在代码中“可视化调试”

1️⃣ 条件渲染调试

<div>
  {process.env.NODE_ENV === 'development' && (
    <pre>{JSON.stringify(state, null, 2)}</pre>
  )}
</div>

2️⃣ 错误边界（Error Boundary）

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

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

  render() {
    if (this.state.hasError) {
      return <h2>出错了</h2>
    }
    return this.props.children
  }
}

五、useEffect / 状态调试技巧

useEffect 调试

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

使用 eslint 提示依赖

npm install eslint-plugin-react-hooks

六、VSCode 断点调试（专业级）

1️⃣ 启动项目

npm run dev

2️⃣ VSCode 添加调试配置

launch.json

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

✅ 可以直接在 VSCode 里断点调试

七、常见 React 调试问题速查

八、推荐调试组合（实战）

✅ 新手：Console + React DevTools
✅ 进阶：VSCode 断点 + Error Boundary
✅ 团队：ESLint + TypeScript

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

• 你用的是 Create React App / Vite / Next.js
• 是 函数组件还是类组件
• 具体遇到什么 bug

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