无限 debugger 的原理与绕过

debugger , JS 中的关键字，在 JS 程序中，遇到 debugger 的时候，程序的执行便会在此处中断，进入调试模式。

但有时候，网站的开发者会利用 debugger ，使其成为阻挠我们正常调试

案例介绍

网站： https://antispider8.scrape.center

看上去没什么不同，但是一旦我们进入开发者模式，网站就会自动进入调试模式

这并不是我们设置的断点，此时不管我们怎么恢复脚本执行，都不能跳过断点

实现原理

我们从 Sources 面板中可以看到， 这里是调用了 setInterval ，每秒执行一次 debugger

禁用断点

全局禁用断点

可以看到，我们点击了禁用断点，然后点一下 Resume script execution 按钮，页面就恢复正常了

但是这种方式并不是很好，因为这样，我们自己也无法使用断点了，现在我们恢复到开始的状态

我们可以在 debugger 所在语句的行号上点击 右键， 然后选择 Never pause here 选项，意思是从不在此处暂停。这样当前断点显示为橙色，并且断点前多了一个问号， 同时 Breakpoints 也出现了刚才添加的断点位置。 这时再点击 Resume script execution 按钮，就会发现我们不会进入无限断点模式了

还有一个办法，就是，我们右键的时候选择 Add conditional breakpoint 这个模式，是要输入条件。也就是满足某个条件才会进入断点模式，这里我们直接输入 false, 然后点击 Resume script execution

替换文件

我们这里还可以用 Overrides  选项卡来替换文件。如果过是第一次使用

新建一个文件夹 例如 ChromeOverrides ， 然后在 Sources 选项卡右边找到 Overrides ， 点击 + 找到刚刚新建的文件夹，选择之后，点击下面 learn more ，在弹出来的新选项卡里选择允许，然后就 OK 了

然后返回 page 选项卡， 在写有 debugger 代码的文件上右键，选择 Overrides content ， 这个文件就同步到了 我们刚刚建立的文件夹里，这时，我们注释掉 debugger ， 保存。 点击 Resume script execution 如果跳过了 debugger ，就是可以了。 如果没跳过，又继续断点到另外一行代码，我们可以继续注释掉，再次点击 Resume script execution 就好

另外，我们不仅可以使用 Charles ， Fiddler 等抓包工具进行替换， 也可以使用浏览器插件 ReRes 等， 还可以通过 PlayWright 等工具 使用 Request Interception 进行替换