空心红点表示调试器未连上VSCode，因Debug Adapter通信链路未建立；需检查状态栏是否显示“调试正在运行”，删launch.json改用JavaScript Debug Terminal，先运行APP再摇出菜单启用Debug，避免在JSX渲染函数设断点，确保source map路径正确、无插件冲突及端口抢占。
断点显示空心红点，说明调试器根本没连上
VSCode 里行号旁出现空心红点（unverified breakpoint），不是代码写错了，而是 Debug Adapter 没建立通信链路。此时 F5 启动后程序照常跑完，控制台也不会输出 debugger attached 日志。
关键判断依据是看 VSCode 底部状态栏：没出现「调试正在运行」字样，就等于没 attach 成功。
- 别信
launch.json自动生成的配置——React Native Tools 插件在 Hermes、Expo 或自定义端口项目中生成的配置大概率失效 - 删掉
.vscode/launch.json，改用 VSCode 内置的JavaScript Debug Terminal运行npm start更稳定 - 必须先手动执行
npx react-native run-android（或run-ios），等 APP 完全启动并处于前台，再摇出开发者菜单 → 点击「Debug」（Android）或「Debug」→「Open debugger」（iOS）
断点设在 JSX 渲染函数里无效，优先换位置
Hot Reloading 下，组件函数体可能被跳过重执行，导致你在 return () => <view></view> 里设的断点直接被绕过。这不是断点坏了，是 React Native 的执行模型决定的。
- 把断点移到
useEffect、事件回调（如onPress={() => { debugger; }}）、或自定义 Hook 内部 - 避免在纯渲染逻辑（JSX 层）设断点；如果必须查渲染逻辑，改用
console.log+ 「Console」面板跳转，或启用React Developer Tools查组件树 - Expo 项目需确保环境变量
EXPO_USE_DEV_SERVER=true生效，否则 source map 路径会错位
sourceMap 路径没对齐，断点会落到 bundle.js 里
你看到断点停在 index.bundle?platform=android... 这类文件里，变量名变成 _a、_b，行号错乱——这说明 source map 没加载成功，或路径映射失败。
- 确认项目已生成
.map文件：metro.config.js中sourceMap: true（默认开启），且没被自定义配置覆盖 - 检查
react-native-tools.packagerPort设置是否与实际一致（默认8081，若改过要同步） - 多包结构（如
packages/ui/src）必须加resolveSourceMapLocations，否则 VSCode 不知道该映射回哪个源目录 - 验证是否生效：打开「调试控制台」，搜
Loaded source map from，看到无 404 的路径才算真正加载
插件冲突和端口抢占是最容易被忽略的硬伤
装了「Debugger for Chrome」或旧版「React Native Debugger」扩展，会抢走 WebSocket 连接通道；同时开多个 Metro 实例，也会让 VSCode 连错进程。
- 只保留官方
React Native Tools扩展，卸载所有名字带 “React”、“Debugger for Edge/Chrome” 的干扰项 - 启动前执行
kill-port 8081（或对应端口），确保 Metro 是唯一监听者 - 用
lsof -i :8081（macOS/Linux）或netstat -ano | findstr :8081（Windows）确认端口干净 - 重启 VSCode 后，首次调试前务必清空所有断点：
Debug: Clear All Breakpoints
断点命不中这件事，90% 是通信没建起来、路径没对上、或者被别的进程/插件截胡了。别在代码逻辑里反复排查，先盯住「有没有连上」「映射对不对」「谁在抢端口」这三个点。
