为什么Chrome调试器单步执行时会进入已添加至忽略列表的文件？

为什么已加入忽略列表的脚本仍会被单步进入 #

Chrome调试器的忽略列表默认没有开启全量拦截，仅对自动单步进入逻辑生效，以下几种例外情况会导致规则被绕过：

• 你手动在被忽略的脚本中打过断点
• 第三方脚本内部硬编码了debugger语句
• 你使用的是普通「单步进入（Step Into）」而非智能单步，旧版Chrome的普通单步进入逻辑会绕过忽略规则
• 添加的忽略规则匹配范围不全，没有覆盖动态注入、打包生成的第三方脚本路径

忽略列表的设计意义是默认过滤非目标代码的调用栈、自动跳过无断点的第三方代码执行，保留例外是为了避免你临时需要调试第三方代码时完全无法进入。

仅调试目标文件的可行方案 #

• 优先使用智能单步进入
  Chrome 109及以上版本自带Smart Step Into功能，快捷键为Shift + F11（Windows/Linux）/ Shift + Option + F11（Mac），触发后会直接跳过所有第三方依赖逻辑，跳转至当前行调用的用户自定义函数内部。你也可以在调试器设置中开启「默认使用智能单步进入」，替换原有普通单步进入的逻辑。
• 完善忽略列表匹配规则
  不要仅添加单个文件路径，用通配符匹配整类第三方脚本，常见规则参考：
  • 匹配所有node_modules下的依赖：*/node_modules/*
  • 匹配所有压缩后的第三方脚本：*.min.js
  • 匹配webpack打包生成的runtime脚本：webpack-internal:///*
    同时打开调试器设置中的「自动忽略已知第三方脚本」、「忽略列表中的脚本禁用断点」两个开关，开启后第三方脚本内的debugger语句和手动断点都会被自动屏蔽。
• 开启单文件调试模式
  在源面板找到你要调试的目标文件，右键选择「只调试此文件」，开启后所有其他文件的断点、单步执行逻辑都会被自动跳过，完全不会进入无关脚本。

内容的提问来源于stack exchange，提问作者Michael Moreno