react如何在浏览器断点调试

使用 Chrome DevTools 调试 React 应用

在 Chrome 浏览器中打开开发者工具（快捷键 F12 或 Ctrl+Shift+I），切换到 Sources 面板。找到需要调试的 React 组件文件（通常位于 webpack:// 或 src/ 目录下），直接在代码行号处点击添加断点。

确保启用 Pause on exceptions（异常暂停）功能，位于 Sources 面板右上角的暂停图标旁。这有助于捕获运行时错误。

配置 Source Maps

确保项目构建时生成正确的 Source Maps。在 webpack.config.js 中配置：

devtool: 'source-map' // 或 'cheap-module-source-map'

开发环境下，Create React App 默认已配置 Source Maps。若断点无法命中，检查构建配置是否正确。

使用 React Developer Tools 扩展

安装 Chrome 扩展 React Developer Tools。通过 Components 面板查看组件树，选中组件后使用 Inspector 定位源码位置。结合 Profiler 面板可分析性能问题。

调试 Hooks 和状态变更

在函数组件中，直接对 useState、useEffect 等 Hook 代码行设置断点。状态更新时，通过 Console 面板输入 $r 可查看当前选中组件的 props 和 state。

网络请求调试

切换到 Network 面板，勾选 XHR 过滤异步请求。点击请求记录查看请求/响应详情，必要时在 Initator 列跳转到发起请求的源码位置。

条件断点和日志点

在断点上右键选择 Edit breakpoint，可设置条件表达式（如 props.id === 2）。使用 Logpoint 替代 console.log，无需修改代码即可输出变量值。

示例：调试 useEffect

useEffect(() => {
  debugger; // 或手动在此行设置断点
  fetchData();
}, [deps]);

当依赖项变化时，执行会暂停，此时可检查调用栈和变量状态。