chrome devtools 黑盒脚本功能可屏蔽 node_modules 等库代码：一、右键单文件选 blackbox script；二、设置 ignore list 添加通配规则；三、配合 source map 在源码设断点；四、右键取消忽略临时调试库内部。
想让断点调试只停在自己写的业务代码里，不跳进 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，立刻恢复对该脚本的完整调试能力
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
