VSCode调试React组件必须配置sourcemap映射和launch.json，否则断点不命中；CRA需确保GENERATE_SOURCEMAP=true，Vite需server.sourcemap=true；launch.json中webRoot设为${workspaceFolder}，CRA还需sourceMapPathOverrides映射；Hooks断点易被跳过因React批量更新机制，建议在事件处理函数中打断点并启用Chrome异步调用栈。

VSCode 开发 React 应用不需要额外装插件就能写代码，但要真正断点调试 React 组件（尤其是 JSX 和 Hooks），必须配好调试器和 sourcemap 映射——否则你打的断点根本不会命中。

为什么默认 launch.json 无法调试 React 组件

create-react-app（CRA）或 Vite 构建的 React 项目，源码是 JSX + TSX，运行时浏览器里是编译后的 JS。VSCode 的 Debugger 默认只认 .js 文件，不自动关联 .tsx 或 .jsx 源文件，除非明确告诉它 sourcemap 怎么找。

• 常见错误现象：Breakpoint ignored because generated code not found 或断点变空心圆
• CRA 项目需确保 react-scripts start 启动时开启了 sourcemap（默认开启，但若改过 GENERATE_SOURCEMAP=false 就失效）
• Vite 项目要确认 build.sourcemap 是 true（开发模式下 server.sourcemap 默认为 true）

VSCode 调试配置：launch.json 关键字段

在项目根目录下创建 .vscode/launch.json，核心是让 Debugger 知道 Chrome 在哪、网页地址是什么、以及怎么把 src/App.tsx 映射到浏览器里的实际执行位置。

React Wrap

React UI？—— JavaScript？

下载

• type 必须是 chrome（需先安装 Debugger for Chrome 插件，VS Code 1.8x+ 推荐换用 ms-vscode.js-debug，已内置）
• request 用 launch（自动启浏览器）或 attach（连已打开的 Chrome 实例）
• url 填开发服务器地址，如 http://localhost:3000；CRA 默认是 3000，Vite 是 5173
• webRoot 必须设为 ${workspaceFolder}，否则 sourcemap 路径解析失败
• 加 "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" } 是 CRA 必选项；Vite 通常不用，但若断点不生效可尝试加 "webpack:///./src/*": "${webRoot}/src/*"

断点调试 React Hooks 为什么经常“跳过”

不是配置问题，是 React 自身更新机制导致的：useState、useEffect 的回调函数可能被批量合并或延迟执行，Debugger 会直接跳过中间状态。

• 不要在 useEffect 第二个参数数组里写 {} 后立刻打断点——它可能在组件挂载前就被跳过
• 想观察 state 变化，优先在事件处理函数（如 onClick）里打断点，再单步进 setState 调用栈
• 启用 Chrome DevTools 的 Async stack traces（设置 → Preferences → Debugger），能更好追踪 Promise 链中的 Hooks 调用
• 如果用了 React.memo 或 useMemo，断点可能因缓存跳过——先确认依赖数组是否真变了

最常被忽略的一点：每次改了 launch.json 或启动方式，记得关掉所有已打开的调试会话再重试；Chrome 的旧标签页不会自动 reload sourcemap，手动刷新或用 Ctrl+R 不够，得关掉再开新调试实例。