突破前端反调试--阻止页面不断debugger

不知道你们有没有遇到过上图这样，有时候想调试网站，一打开开发者工具立即 debugger ,而且跳过了还是会继续，或者是有时候在调试网页时，突然就给你来一个 debugger，接着就是反复来回 debugger 了，贼烦，那今天分享个教程，教大家如何跳过这个 debugger。

1. 问题重现

一次扒某网站的前端代码，打开控制台要看Network，结果发现他们页面一打开控制台就不断的debugger，100ms一次，很影响看页面内容。就像下面这样的

2. 问题分析

每次在断点处停下来的时候页面都会跳到source这个tab页面，也能够看到他的debugger的代码，其实他的实现很简单，只有这一行代码

(function() {var a = new Date(); debugger; return new Date() - a > 100;}())

虽然简单，但是却很有效。

• 不停地打断你，页面跳到source页面，阻止你看他代码不
• 断的产生不可回收的对象，占据你的内存，造成内存泄漏，没过多久浏览器就会卡顿

所以他带来的影响还是挺大的，我们需要解决这个问题。

3.问题解决

1）

这个问题解决起来还是蛮简单的，问题解决只需要一句话：禁止断点。 而对应的操作是在Chrome控制台的Source Tab页点击Deactivate breakpoints按钮或者按下Ctrl + f8(下图)。

这样就能禁用断点了，问题就得到了解决，但是当你需要调试的时候记得要起他哦。很简单的操作，但是你如果对Chrome控制台调试不熟悉的话还是比较头疼的

2）

后来发现这种做法有时候有些不妥，就比如有我们看别人网站代码有时候就是为了调试网站的代码，那么这时我们这么直接干脆的禁止断点后我们也没办法调试网站的代码了，那这就有点杀敌一千自损八百的意思。那有什么办法可以满足我们既能阻止网站一直debugger还能让我们继续调试网站的代码呢？这就要看网站怎么实现不断debugger了: 有的网站做的比较简单，是用具名函数做的，类似这样

setInterval(startDebug, 100); // 举个例子而已，很多网站并不是这么实现的function startDebug() { debugger; };

这种情况比较好解决，我们随便重新定义这个方法就行了，形如:

function startDebug() {};

这个添加的地方可以使在控制台直接添加，比如这样

或者可以添加一个条件断点的，比如这样：

3)

还有这样的条件断点

setInterval(function () { debugger }, 100); // 举个例子而已，很多网站并不是这么实现的

直接上动图说明情况

再来说说不能应对的情况，还是一个动图说明问题。

也就是说，条件端点的适用情况与具体代码的书写风格有关系。 另外，我发现Add conditional breakpoint下面的Never pause here也能在突破反调试的时候也能起到一定作用。局限性与上Add conditional breakpoint一样。 同样用两个动图说明问题。

能work的情况

不能work的情况

4）

如果上面的方法都不能解决的话，就需要把这个 js 文件下载下来，然后改动触发 debbgger 的代码了。可以参考我以前写过的请求网页时，怎么给我返回了一段 JavaScript 代码

或者像我前几天一样，改了代码之后配合 fiddler 软件进行重定向，还是很轻松解决的。

最后

学会了没，学会了的话可以试试水这个网站：https://bbs.nubia.cn/（调试之前需要清空cookie），就是我们之前弄过的网站，用上面的方法可以完美解决，不需要下载 JS 文件，直接加条件断点即可。

如果这篇文章帮助到你了，欢迎点在看，分享文章支持，谢谢。在看越多，更新越快！

原文地址：https://segmentfault.com/a/1190000012359015