VS Code 调试 react 应用需手动配置 launch.json 并确保开发服务器支持 sourcemap，否则断点失效；CRA 默认支持，vite/Next.js/自建 webpack 需分别确认 sourcemap 开启、开发模式运行及 devtool 配置正确。
vs code 调试 react 应用不依赖插件“自动生效”，必须手动配置 launch.json 并确保开发服务器支持 sourcemap —— 否则断点会失效或跳转到编译后代码。
确认 React 项目运行在支持调试的开发服务器上
Create React app（CRA）默认启用 sourcemap，npm start 启动后即可调试；但若你用 Vite、Next.js 或自建 Webpack，请检查以下几点：
- Vite 项目需确保
build.sourcemap设为true（开发模式默认开启），且启动命令是vite（非vite build） - Next.js 开发模式（
next dev）默认支持，但若用了output: 'export'或静态导出，则无法调试客户端代码 - 自定义 Webpack 需确认
devtool配置为'source-map'或'eval-source-map'，且mode: 'development'
在 VS Code 中配置 launch.json 启动调试
打开项目根目录 → 按 Ctrl+Shift+P（windows/linux）或 Cmd+Shift+P（macos）→ 输入 “Debug: Open launch.json” → 选择 “chrome” 或 “edge” 环境（推荐 Chrome）→ 自动生成基础配置。关键修改项：
-
url必须与你的开发服务器地址一致，如"http://localhost:3000"（CRA 默认）或"http://localhost:5173"（Vite 默认） -
webRoot指向源码根目录，通常为"${workspaceFolder}"；若入口 html 不在根目录（如public/index.html），需确保路径能正确映射源码 - 添加
"sourceMapPathOverrides"可解决路径映射失败问题，例如 CRA 常用：{"webpack:///src/*": "${webRoot}/src/*"}
设置断点并验证是否命中源码而非 bundle.js
在 .jsx 或 .tsx 文件中点击行号左侧设断点，然后按 F5 启动调试。观察以下现象判断是否正常：
- 断点变成实心红点（而非空心），且悬停显示 “Breakpoint set”
- 调试器暂停时，左侧变量面板显示的是原始 React 组件名（如
App）、而非React.createElement调用栈 - 调用栈（CALL STACK）中文件路径显示为
src/App.jsx，而不是Static/js/bundle.js:1234 - 若断点始终不触发，检查浏览器是否弹出新窗口（而非复用已有标签页），因为复用页不会加载 sourcemap
常见失败原因和绕过方案
断点失效最常因路径映射错位或 sourcemap 未加载。快速排查顺序：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Sources 标签页 → 展开 localhost → 查看是否有
webpack://或app://下的源码树；没有则 sourcemap 未生成或未被识别 - 检查 Network 面板，过滤
.map，确认main.js.map返回 200 且内容可读 - VS Code 的 DEBUG console 中若出现
Could not read source map，说明路径配置错误，优先调整sourceMapPathOverrides - 临时方案：在代码中写
debugger;语句，它比 UI 断点更“硬”，能绕过部分映射失败场景
真正卡住的地方往往不是配置本身，而是开发服务器没重启 —— 改完 webpack.config.js 或 vite.config.ts 后，必须重新运行 npm run dev，旧进程不会热更新 sourcemap 设置。