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 映射到浏览器里的实际执行位置。
-
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 不够，得关掉再开新调试实例。
