应使用Chrome/Edge DevTools的黑盒脚本功能：右键文件选Blackbox script可单个屏蔽，Settings→Ignore list添加通配规则（如node_modules/*）批量忽略，配合source map在src目录设断点，确保调试仅停留业务代码。
想让断点调试只停在自己写的业务代码里，不跳进 React、Vue、lodash 或 node_modules 里的文件？关键就是用好 Chrome（及 Edge）DevTools 的「黑盒脚本」（Blackbox Scripts）功能。它不是简单隐藏文件，而是从调试流程中真正屏蔽——Step Into 不进去、Call Stack 不展开、断点不触发、debugger 语句也无效。
单个文件快速黑盒
适合临时处理一个特别干扰的库文件，比如 react-dom.development.js 或某个 CDN 加载的压缩版工具库：
- 打开 DevTools → 切到 Sources 面板
- 在左侧文件树中找到目标脚本（例如
node_modules/react-dom/index.js） - 右键点击该文件名 → 选择 Blackbox script
- 看到右下角提示 “Script blackboxed”，即生效；文件名变灰，调用栈里也不再显示它的帧
通配规则批量忽略
手动一个个右键太麻烦？在设置里加通配规则，自动匹配所有符合条件的脚本：
- 点 DevTools 右上角 ⚙️ → Settings → 左侧选 Ignore list（部分版本仍标为 Blackboxing）
- 在 Add pattern 输入框中添加规则，支持通配符和简单通配：
-
node_modules/*—— 忽略整个依赖目录 -
**/lodash.*.js—— 匹配所有 lodash 版本文件 -
*.min.js—— 屏蔽所有压缩脚本 -
https://cdn.jsdelivr.net/*—— 过滤常见 CDN 资源 - 每输一条点 Add，规则立即生效；刷新页面后自动应用
配合 source map 才真正精准
光加黑盒还不够——如果断点打在打包后的 bundle.js 上，调试器根本分不清哪段是你的代码、哪段是库代码。必须确保：
- 构建时开启 source map（Webpack/Vite 默认已开，检查输出是否有
.map文件） - 在 Sources 面板中，优先在
webpack://或app://下的src/目录里找原始源码设断点 - 或直接在业务代码里写
debugger，运行时就会停在你自己的.ts或.js文件里，F11 Step Into 也只会进入未被黑盒的源文件
需要查库内部时随时放行
黑盒不是铁板一块，怀疑是第三方库引发的问题？可以临时取消屏蔽：
- 在 Sources 面板中，右键已变灰的被忽略文件 → 选 Don’t ignore this script
- 或回到 Settings → Ignore list，取消对应规则前的勾选
- 无需重启 DevTools，立刻恢复对该脚本的完整调试能力
