应优先检查热更新回退导致的报错覆盖，启用浏览器Console的Preserve log；再通过Cursor断点调试、React DevTools诊断渲染错误；最后利用Problems面板排查编译期静态错误。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你在Cursor中运行React项目突然报错，控制台只显示“Error in ./src/App.js”却看不到具体堆栈，光靠猜根本没法快速定位问题根源。
确认错误是否来自热更新而非真实运行时
点击右下角状态栏的「Hot Reload」图标 → 查看弹出提示是否含「Fast Refresh had to perform a full reload」字样。如果是，说明错误触发了热更新回退，此时控制台输出被清空过一次，真实报错已被覆盖。
按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）打开浏览器开发者工具 → 切换到 Console 标签页 → 点击左上角 ⚙️ 设置图标 → 勾选「Preserve log」。这一步必须做，否则刷新后错误日志直接消失。
启用Cursor内置调试器断点调试
方法一：在代码行号左侧灰色区域单击，出现红点即设下断点；光标停在变量名上时按 F9 也能快速添加。
方法二：在 Cursor 底部状态栏找到「Run and Debug」图标（虫子形状）→ 点击后选择「React App: Start」配置 → 确保 launch.json 中的 "url" 字段指向 【http://localhost:3000】，不是 3001 或其他端口，否则断点永远不会命中。
启动调试后，页面自动打开并暂停在第一个断点；若没反应，检查终端是否仍在运行 npm start —— Cursor 调试器不会自动接管进程，必须先手动启动开发服务器。
捕获组件渲染阶段的隐性错误
第一步：打开 src/react-app-env.d.ts → 在文件末尾新增一行：declare global { interface Window { __REACT_DEVTOOLS_GLOBAL_HOOK__: any; } }
第二步：在报错组件顶部插入一段临时诊断代码：
console.log('render start', { props, state });
第三步：在 Cursor 的「Explorer」侧边栏右键点击该组件文件 → 选择「Reveal in Terminal」→ 输入 npx react-devtools 启动独立 DevTools 窗口 → 这时再刷新页面，就能看到组件树中红色高亮的异常节点，比 console.error 更早暴露问题位置。
注意：如果用了 React.memo 或 useMemo，错误可能发生在缓存计算内部，此时 console.log 放在 memo 包裹函数内部才有效，放外面会跳过执行。
查看编译期错误而非运行时错误
打开 Cursor 左侧「Problems」面板（默认快捷键 Ctrl+Shift+M）→ 这里列出的是 TypeScript 或 ESLint 检测出的静态错误，比如类型不匹配、未定义变量引用，它们会在代码保存瞬间就报出，和浏览器控制台里的错误不是一回事。
双击 Problems 面板中的某条报错 → 光标自动跳转到对应行 → 如果是 import 路径错误，Cursor 通常能自动给出「Quick Fix」建议，点击即可修正路径大小写或缺失的 ./ 前缀。
