如何通过js判断浏览器调试工具被打开

一、debugger

类似于代码里的断点,浏览器在打开开发者工具时(对应于代码调试时的 debug 模式)检测到 debugger 标签(相当于是程序中的断点)的时候会暂停程序的执行:

此时需要点一下那个蓝色的“Resume script execution”程序才会继续执行,这中间会有一定的时间差,通过判断这个时间差大于一定的值就认为是打开了开发者工具。这个方法并不会误伤,当没有打开开发者工具时遇到 debugger 标签不会暂停。

1
2
3
4
5
6
7
8
9
10
11
12
/**
* 立即运行函数,用来检测控制台是否打开
*/
var e = 0,
n = setInterval(function () {
var n = +new Date();
debugger;
var o = +new Date();
if (o - n > 500) {
alert("系统监测非法调试,请刷新重试");
}
}, 500);

此方法存在一定的缺陷,用户可以通过手动禁用浏览器的断点来屏蔽 debugger 代码,不过这样的话调试者也没有办法调试自己的断点了,还是能够恶心一下对方的:

二、重写 toString()

对于一些浏览器,比如 FireFox,如果控制台输出的是对象,则保留对象的引用,然而最终显示是通过调用其 toString()方法将字符串打印到控制台上。当用户打开调试工具栏时,toString 方法就会被调用,从而被我们捕获到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
* 立即运行函数,用来检测控制台是否打开
*/
setInterval(() => {
if (
(function () {
try {
if (/firefox/i.test(navigator.userAgent)) {
var e = /./;
return (
(e.toString = function () {
this.opened = !0;
}),
console.log(e),
console.clear && console.clear(),
e.opened || !1
);
}
} catch (e) {
return !1;
}
})()
) {
window.stop && window.stop();
alert("系统监测非法调试,请刷新重试");
debugger;
}
}, 500);

经测试该方法只在 firfox 浏览器中有效,chrome 浏览器即使在调试工具栏关闭的情况下也会调用 toString 方法。

三、defineProperty

原理和上面第二种方法类似,也是通过打印一个对象并监听这个对象上的属性进行检测。只不过这次的对象是一个 html 元素,检测方法也不是用 toString,而是对其“id”属性的 get 方法进行监听实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
* 立即运行函数,用来检测控制台是否打开
*/
setInterval(() => {
if (
(function () {
try {
var n = !1,
o = document.createElement("any");
return (
Object.defineProperty(o, "id", {
get: function () {
n = !0;
},
}),
console.log(o),
console.clear && console.clear(),
n || !1
);
} catch (e) {
return !1;
}
})()
) {
window.stop && window.stop();
alert("系统监测非法调试,请刷新重试");
debugger;
}
}, 500);

经检测此方法只在 chrome 内核的浏览器中有效,firefox 浏览器上打印这个元素并不会访问其 id 属性。

总结

以上三种方法均有优缺点:

  1. 通过检查 debugger 前后的时间差的方法,兼容性好,比较通用,缺点是相对容易被绕开
  2. 通过 toString 和 defineProperty 方法检查存在一定的兼容性问题,可以将两种方法结合起来,通过 ua 判断一起使用

注意但凡是前端 js 进行的拦截措施都有可能被调试着通过一定的方法绕过,不能百分之百拦截用户调试。第 2,3 种方案还可以用于上报用户的调试行为,为爬虫检测提供依据(建议将 debugger 关掉避免被发现)。


如何通过js判断浏览器调试工具被打开
https://www.wobushi.top/2020/如何通过js判断浏览器调试工具被打开/
作者
Pride Su
发布于
2020年10月30日
许可协议