断点打不进App.jsx，首要确认Chrome是否被VSCode调试协议接管；若断点显示“unbound breakpoint”或浏览器复用标签页，则说明调试会话未建立或sourcemap路径映射失败，需严格校验launch.json中url、webRoot和sourceMapPathOverrides三者与实际运行环境一致。
断点打不进 App.jsx？不是插件没装好，而是 VSCode 和 Chrome 根本没对上号——调试器没接管浏览器，或者 sourcemap 路径映射错位了。
Chrome 调试器连上了吗？别猜，直接看
VSCode 不运行浏览器，只发指令；断点是否生效，取决于 Chrome 是否真被调试协议接管。常见表现是：断点显示空心圆、悬停提示 “Unbound breakpoint”，或 F5 后浏览器一闪而过。
- 先手动启动项目：
npm start（CRA）、vite（Vite）或next dev（Next.js），确保http://localhost:3000能正常打开 - 在 VSCode 中按
Ctrl+Shift+P→ 输入 “Debug: Open launch.json” → 选pwa-chrome（不是旧版chrome类型） - 启动调试后，必须看到 Chrome 弹出**全新窗口**（不是复用已有标签页）——复用页不会加载 sourcemap
- 打开 Chrome DevTools → Sources 面板 → 展开左侧 localhost → 找有没有
webpack://或app://前缀的源码树；没有就说明 sourcemap 根本没生成或没加载
launch.json 里这三项必须严丝合缝
配置不是复制粘贴就能用，url、webRoot、sourceMapPathOverrides 三者必须和你实际运行环境完全一致，差一个斜杠都可能断点失效。
-
url必须和你手动访问的地址完全一致（含协议、域名、端口），比如"http://localhost:3000"，不能写成"http://127.0.0.1:3000"或漏掉http:// -
webRoot推荐用"${workspaceFolder}"，不是"${workspaceFolder}/src"—— CRA 中后者常导致路径错位；若入口 HTML 在public/index.html，且开发服务器服务的是public/目录，则webRoot应为"${workspaceFolder}/public" -
sourceMapPathOverrides不是可选项，是救命项：在组件里加一行debugger;，刷新页面，在 Chrome DevTools 的 Sources 面板右键文件 → “Reveal in Sidebar”，看路径显示的是webpack:///./src/App.jsx还是webpack:///src/App.jsx，再对应写：- 若显示
webpack:///./src/*→{"webpack:///./src/*": "${webRoot}/src/*"} - 若显示
webpack:///src/*→{"webpack:///src/*": "${webRoot}/src/*"}
- 若显示
为什么断点总停在 bundle.js 里？
这不是断点位置问题，是 sourcemap 没被识别，调试器被迫退回到编译后代码。本质是构建层没输出可用映射，或 VSCode 找不到原始路径。
- CRA：确认用的是
npm start（不是npm run build），它默认启用devtool: 'source-map' - Vite：检查
vite.config.ts是否有build: { sourcemap: true }；开发时必须用vite命令启动，不能用vite build - Webpack 自定义项目：
devtool不能是'eval'或false，推荐'cheap-module-source-map'，且mode必须为'development' - Chrome DevTools 设置里要勾选 “Enable JavaScript source maps”（Settings → Preferences → Sources）
- 如果
useEffect(() => {}, [])第一行断点停在React.createElement调用栈里，说明sourceMapPathOverrides没生效，或webRoot指向错误目录
最易被忽略的一点：HMR 热更新期间断点会暂时失效，改完代码等几秒再刷新；另外，console.log 和 debugger; 是验证 sourcemap 是否工作的最快方式——它们能触发 Chrome 正确加载原始源码，比等 VSCode 断点更可靠。
