写代码时设好断点，按F5一跑，结果光标嗖一下就过去了——断点压根没停。你是不是也常遇到这事儿？别急着怀疑自己手残，多数时候是几个小细节没注意。
1. 代码根本没执行到那行
最常见的情况：你断点打在 if 分支里，但实际运行走的是 else；或者断点在某个条件不满足的函数里，压根没被调用。比如：
if (user.role === 'admin') {
console.log('欢迎管理员'); // 断点打在这儿
}可你登录的是普通用户，这段代码根本不会执行，断点自然跳过。先确认逻辑路径，再下断点。
2. 源码和实际运行的 JS 对不上
用 webpack、Vite 打包后，浏览器里调试的是 bundle.js，但你在 .vue 或 .ts 文件里下的断点，如果 Source Map 没配好或加载失败，DevTools 就找不到对应位置。可以打开开发者工具的 Settings → Preferences → Sources，勾选 Enable JavaScript source maps，再刷新试试。
3. 断点被禁用了
悄悄告诉你：Chrome DevTools 里右键断点，有个“Disable breakpoint”选项。有时候手滑点了，断点图标会变灰，看着还在，其实已经失效了。检查断点左侧的小圆点是不是实心蓝色——灰色就说明被禁用了。
4. 异步代码里断点“消失”了
比如在 setTimeout、Promise.then 或 async 函数里设断点，但页面一刷新就跳过？可能是脚本执行太快，或者断点所在代码还没加载完成。试试在断点前加一句 debugger;，强制中断：
setTimeout(() => {
debugger; // 这里一定会停住
console.log('到了');
}, 100);5. 浏览器缓存了旧版本代码
改完代码，没清缓存就直接刷新，浏览器可能还在跑上一版的 JS。Ctrl+F5 硬刷新，或者在 DevTools 的 Network 标签页勾上 Disable cache，再试一次。
断点不是玄学，它只是忠实地反映代码的真实执行状态。多看一眼控制台有没有报错，多瞄一眼 Sources 面板左边的文件树是否加载正常，问题往往就藏在这些小地方里。