Blackboxing 是 Chrome DevTools 跳过第三方脚本调试的核心功能，支持右键单文件黑盒化或 Settings 中配置全局正则规则（如 /node_modules/、*.min.js），配合事件断点可精准定位业务代码，异常中断仍可见便于排查。
在 JavaScript 调试中，Blackboxing（黑盒配置）是让 Chrome DevTools 自动跳过第三方框架源码、专注你自己的业务逻辑的核心手段。它不修改代码，也不影响运行，只改变调试器的单步行为——比如按 F10 时，不会钻进 react-dom.development.js 或 vue.runtime.esm-bundler.js 里，而是直接“跃过”这些文件，停在你写的函数中。
右键单个文件快速黑盒化
适合临时处理已知干扰强的脚本，比如刚发现断点总卡在 lodash.min.js 里：
- 打开 DevTools → Sources 面板，展开左侧文件树，找到目标文件（如
node_modules/react-dom/cjs/react-dom.development.js） - 在文件名上右键 → 选择 Blackbox script
- 右下角出现 “Script blackboxed” 提示即生效；该文件在 Call Stack 中不再展开，
debugger和断点也失效 - 编辑器中会显示一条黄色横条，点击可查看说明或取消黑盒
设置全局忽略规则（推荐长期使用）
手动一个个黑盒太费时，尤其在 React/Vue/Next.js 项目中。进入 Settings 统一配置正则规则，一次设置，永久生效：
- 按 F12 打开 DevTools → 右上角 ⚙️ → Settings → Ignore list（部分版本仍标为 Blackboxing）
- 在 Add pattern 输入框中添加常用规则，例如：
**/node_modules/**
**/next/**
*react*
*vue*
*.min.js - 每输一条点 Add，规则立即生效；刷新页面后，所有匹配路径的脚本自动被跳过
- 注意：规则支持 glob 通配符（
**表示任意层级），不需写完整 URL
配合 Event Listener Breakpoints 精准定位事件源头
黑盒不是孤立技巧，和事件断点联动才能真正摆脱“点一下，跳进 jQuery 源码”的困境：
立即学习“Java免费学习笔记（深入）”；
- 在 Sources 面板左侧展开 Event Listener Breakpoints
- 勾选 click、input、submit 等常用类型（优先 Document/Element 下的）
- 此时点击按钮，断点将直接停在你写的
addEventListener注册行，或onClick函数体内部，而非框架封装层 - 若未启用黑盒，断点大概率落在
react-dom的调度函数里；启用后，调用栈干净，一眼看到自己代码在哪
黑盒后异常中断？那是线索不是故障
黑盒不会屏蔽错误，只是跳过执行流程。如果某次调试突然停在已被黑盒的文件中，通常意味着：
- 该文件抛出了未捕获异常（Uncaught Error），DevTools 强制中断以便定位
- 这是排查问题的好时机：可临时取消黑盒，看清错误堆栈根因，修复后再加回
- console.log 输出不受影响，黑盒只作用于调试器的单步控制流
