可通过chrome devtools的“黑盒脚本”功能排除第三方库干扰：一、右键单个文件选择blackbox script；二、settings中添加正则规则批量忽略；三、用node_modules/**模式全局屏蔽依赖目录；四、通过show ignore-listed frames临时恢复被忽略脚本的调用帧显示。
如果您在 Chrome 开发者工具中调试 JavaScript 时频繁跳入 React、Vue、lodash 等第三方库源码，导致调用栈混乱、断点难以精准定位，则可通过启用“黑盒脚本（Blackbox Scripts）”功能将指定脚本从调试流程中排除。以下是实现该目标的多种操作路径：
一、对单个脚本文件执行右键黑盒化
该方法适用于临时忽略某个已知干扰性极强的特定文件（如 react-dom.development.js 或 vue.runtime.esm-bundler.js），操作后该文件的所有函数调用将不显示在 Call Stack 中，也不响应 debugger 语句或断点。
1、打开目标网页，按 F12 或 Ctrl+Shift+I 打开 Chrome DevTools。
2、切换至 Sources 面板，展开左侧文件树，定位到需忽略的脚本文件（例如 node_modules/react-dom/.../react-dom.development.js）。
3、在文件名上右键单击，选择 Blackbox script 选项。
4、确认右下角出现提示“Script blackboxed”，此后该脚本即被标记为忽略状态。
二、通过正则模式批量匹配并忽略脚本
该方法适用于长期项目中需系统性屏蔽某类文件（如所有 .min.js、所有 node_modules 下的 JS、所有 CDN 加载的第三方库），避免逐一手动设置，规则持久保存于 DevTools 设置中。
1、在 DevTools 界面右上角点击齿轮图标 ⚙️ 进入 Settings。
2、在左侧菜单中选择 Preferences → Blackboxing（部分版本显示为 Ignore List）。
3、在 Add pattern 输入框中输入匹配规则，例如：
*node_modules*
*react*
*.min.js
https://cdn.jsdelivr.net/npm/*
4、每输入一条规则后点击 Add 按钮，规则即刻生效并显示在下方列表中。
5、关闭 Settings，刷新页面后，所有匹配规则的脚本在调试时自动跳过，Call Stack 中不再展开其内部帧。
三、全局忽略 node_modules 目录（含子目录全部 JS）
该方法针对使用现代构建工具（Vite、Webpack、Create React App）的项目，可一次性屏蔽整个依赖目录，显著提升调试聚焦度；但需注意：若需调试依赖本身行为，应先临时移除该规则。
1、进入 DevTools Settings → Blackboxing 页面。
2、在 Add pattern 输入框中粘贴完整路径模式：node_modules/**（注意双星号表示递归匹配所有子级文件）。
3、点击 Add，确认该条目出现在忽略列表中。
4、若此前已手动 blackbox 过某些 node_modules 文件，此时无需取消，二者叠加生效。
5、重启当前调试会话（或刷新页面），Sources 面板中 node_modules 下所有 JS 文件名将显示为灰色，并带斜线标识，表明已被忽略。
四、临时恢复被忽略脚本的调试可见性
当需要临时检查已被黑盒化的代码（例如排查某第三方库引发的异常根源），可在不删除规则的前提下强制显示其调用帧，无需重启 DevTools 或修改配置。
1、在 DevTools 右上角三点菜单中，点击 More tools → Show ignore-listed frames（部分版本路径为 Settings → Preferences → Blackboxing → 勾选 “Show ignore-listed frames”）。
2、该选项启用后，Call Stack 中原本被折叠的黑盒脚本帧将重新展开为浅灰色条目。
3、鼠标悬停于任一灰色帧上，可查看其文件路径与行号；点击后仍可跳转至 Sources 面板对应位置。
4、再次点击同一菜单项即可关闭该视图模式，恢复默认精简状态。
