突破前端反调试:阻止页面无限不断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页面,阻止你看他代码不
断的产生不可回收的对象,占据你的内存,造成内存泄漏,没过多久浏览器就会卡顿
所以他带来的影响还是挺大的,我们需要解决这个问题。

  1. 问题解决
    这个问题解决起来还是蛮简单的,问题解决只需要一句话:禁止断点
    在这里插入图片描述

这样就能禁用断点了,问题就得到了解决,但是当你需要调试的时候记得要起他哦。很简单的操作,但是你如果对Chrome控制台调试不熟悉的话还是比较头疼的
后来发现这种做法有时候有些不妥,就比如有我们看别人网站代码有时候就是为了调试网站的代码,那么这时我们这么直接干脆的禁止断点后我们也没办法调试网站的代码了,那这就有点杀敌一千自损八百的意思。那有什么办法可以满足我们既能阻止网站一直debugger还能让我们继续调试网站的代码呢?这就要看网站怎么实现不断debugger了:
有的网站做的比较简单,是用具名函数做的,类似这样

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

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

function startDebug() {};

或者右键可以添加一个条件断点,在debugger这里条件断点为false。
还可以直接在console输入以下代码,步骤如下:

  1. 打开F12点击Console

  2. 输入(function(){}).constructor === Function,回车;

  3. 如果返回的是true,继续输入Function.prototype.constructor = function(){},并回车

  4. 切换回sources选项卡,点击继续执行,无限debugger的问题就解决了

注意:如果第二步返回的是false,则此方法不可用。

终极办法:下载带有debugger的js文件本地修改,配合 fiddler 软件或者浏览器插件进行js替换。

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值