断点打不进App.jsx，根本原因是VSCode与Chrome未成功建立调试会话或sourcemap路径映射失败；必须确保launch.json中url、webRoot、sourceMapPathOverrides三项严格匹配运行环境，且Chrome以全新窗口启动并加载webpack://源码树。
断点打不进 App.jsx，基本不是插件没装对，而是 VSCode 和 Chrome 没真正连上——要么调试会话没启动，要么 sourcemap 路径映射错位。必须手动配 launch.json，且三项配置（url、webRoot、sourceMapPathOverrides）差一个字符都会失效。
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
launch.json 里这三项必须严丝合缝
url、webRoot、sourceMapPathOverrides 是 React 断点调试的命门，三者不一致，断点就停在 bundle.js 里，而不是源码。
-
url必须和你手动访问的地址完全一致：比如"http://localhost:3000"，不能写成"http://127.0.0.1:3000"或漏掉http:// -
webRoot推荐用"${workspaceFolder}"；若入口 HTML 在public/index.html且开发服务器服务的是public/目录，则应为"${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/*"}
- 若显示
构建层不输出 sourcemap，断点注定失效
断点停在编译后代码，本质是构建工具没生成或没暴露 sourcemap。不同脚手架要求不同：
- Create React App（CRA）默认开启，
npm start即可 - Vite：开发模式默认开启，但需确认未误用
vite build；若自定义build.sourcemap，必须设为true - Next.js：仅
next dev支持客户端调试；若用了output: 'export'或静态导出，无法调试 - 自建 Webpack：检查
devtool是否为'source-map'或'eval-source-map'，且mode: 'development'
为什么断点总跳到 bundle.js？别怪 VSCode
这不是 VSCode 故障，是 sourcemap 加载失败的明确信号。最常被忽略的两个点：
- Chrome DevTools 的 Sources 面板里，左侧树状目录中必须能看到
webpack://或app://前缀的源码树；没有，说明 sourcemap 根本没生成或没被识别 -
sourceMapPathOverrides的 key 必须和实际 sourcemap 中的路径前缀完全一致——多一个点（.）、少一个斜杠（/），都会导致映射失败
