chrome devtools 中可通过忽略列表（ignore list）跳过第三方库代码，结合 blackboxing 和 source map 实现仅在业务代码中单步调试。
在 Chrome DevTools 中调试时，可以通过“忽略列表（Ignore List）”功能跳过第三方库代码，让 debugger 和单步执行只作用于你的业务代码。
添加第三方库到忽略列表
打开 DevTools → Sources 面板 → 右键左侧文件树中的库文件（如 node_modules/react-dom/... 或 lodash.js），选择 Add script to ignore list。也可手动添加匹配规则：
- 点击右上角 ⋯ → Settings → Ignore list → Add pattern
- 输入通配符规则，例如：
node_modules/*、**/lodash.*.js、vendor/*.js - 保存后，这些脚本将变灰显示，DevTools 默认不进入其中单步（Step Into）
启用“仅业务代码”单步模式
即使加了忽略列表，按 F11（Step Into）仍可能意外进入库代码。这时需开启更严格的过滤：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在 Sources 面板底部工具栏，勾选 Auto-detect minified sources（可选，辅助识别压缩文件）
- 更重要的是：开启 Blackboxing —— 它不仅跳过断点，还让 Step Into 跳过被屏蔽的脚本
- 已添加到 Ignore List 的文件默认启用 Blackboxing；也可在 Settings → Ignore list 中单独为某条规则开启/关闭 “Blackbox” 开关
配合 source map 和自定义入口断点
确保你的构建工具（如 Webpack/Vite）生成了正确的 source map，并指向原始业务源码（如 src/ 下的 .ts/.js 文件）：
- 在 Sources 面板中，优先在
webpack://或app://下的src/文件里打 debugger 或断点 - 避免在打包后的
bundle.js上直接打断点——它混合了业务与库代码，无法精准跳过 - 可在关键业务入口（如 React 组件的
useEffect、Vue 的mounted）加debugger，再用 F10（Step Over）和 F11（Step Into）推进，F11 此时只会进入你未忽略的源文件
临时禁用黑盒以排查问题
有时需要临时查看库内部逻辑（比如怀疑是 React 内部触发异常）：
- 在 Sources 面板，右键已灰显的忽略文件 → Don’t ignore this script
- 或在 Settings → Ignore list 中临时取消勾选对应规则
- 调试完再恢复，避免影响日常业务调试节奏
不复杂但容易忽略。关键是把 ignore list + blackboxing + 源码映射三者配齐，之后 F10/F11 就真正只在你写的代码里走。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
