如何通过js判断浏览器调试工具被打开
一、debugger
类似于代码里的断点,浏览器在打开开发者工具时(对应于代码调试时的 debug 模式)检测到 debugger 标签(相当于是程序中的断点)的时候会暂停程序的执行:
此时需要点一下那个蓝色的“Resume script execution”程序才会继续执行,这中间会有一定的时间差,通过判断这个时间差大于一定的值就认为是打开了开发者工具。这个方法并不会误伤,当没有打开开发者工具时遇到 debugger 标签不会暂停。
1 |
|
此方法存在一定的缺陷,用户可以通过手动禁用浏览器的断点来屏蔽 debugger 代码,不过这样的话调试者也没有办法调试自己的断点了,还是能够恶心一下对方的:
二、重写 toString()
对于一些浏览器,比如 FireFox,如果控制台输出的是对象,则保留对象的引用,然而最终显示是通过调用其 toString()方法将字符串打印到控制台上。当用户打开调试工具栏时,toString 方法就会被调用,从而被我们捕获到。
1 |
|
经测试该方法只在 firfox 浏览器中有效,chrome 浏览器即使在调试工具栏关闭的情况下也会调用 toString 方法。
三、defineProperty
原理和上面第二种方法类似,也是通过打印一个对象并监听这个对象上的属性进行检测。只不过这次的对象是一个 html 元素,检测方法也不是用 toString,而是对其“id”属性的 get 方法进行监听实现。
1 |
|
经检测此方法只在 chrome 内核的浏览器中有效,firefox 浏览器上打印这个元素并不会访问其 id 属性。
总结
以上三种方法均有优缺点:
- 通过检查 debugger 前后的时间差的方法,兼容性好,比较通用,缺点是相对容易被绕开
- 通过 toString 和 defineProperty 方法检查存在一定的兼容性问题,可以将两种方法结合起来,通过 ua 判断一起使用
注意但凡是前端 js 进行的拦截措施都有可能被调试着通过一定的方法绕过,不能百分之百拦截用户调试。第 2,3 种方案还可以用于上报用户的调试行为,为爬虫检测提供依据(建议将 debugger 关掉避免被发现)。
如何通过js判断浏览器调试工具被打开
https://www.wobushi.top/2020/如何通过js判断浏览器调试工具被打开/