0%

检测F12控制台是否开启

前言

吧友提到了拦截控制台的情况。别人页面中有个js文件,无法调试.有啥办法解除这个限制.
于是好奇找了下stackoverflow, Find out whether Chrome console is open, 但是代码不太懂。
后来dalao告诉我知乎有篇文章: 前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板(F12打开开发者工具)?

Chrome 适用(截止至63.0.3239.108)

在控制台打开的时候, 打印html元素会去取id属性的值, 只要覆盖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
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
status: <div id="devtool-status"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var checkStatus;

// 1. 创建一个html元素, 不能使用普通Object, 两者日志处理方式不同
var element = new Image();
//var element = document.createElement('any');
// 2. 重新定义该元素的get方法
Object.defineProperty(element, 'id', {
get:function() {
checkStatus='on';
}
});

// 3. 定时检测控制台是否打开
setInterval(function() {
checkStatus = 'off';
// 3.1 不使用log, 使用debug, 避免污染控制台
console.debug(element);
document.querySelector('#devtool-status').innerHTML = checkStatus;
}, 1000)
</script>
</html>

Firefox 适用(截止至57.0.4)

打印普通对象的日志会调用该对象的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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
status: <div id="devtool-status"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var checkStatus;

var devtools = /./;
devtools.toString = function() {
checkStatus = 'on';
}

setInterval(function() {
checkStatus = 'off';
console.log(devtools);
document.querySelector('#devtool-status').innerHTML = checkStatus;
}, 1000)
</script>
</html>

参考资料

很高兴得到您的赞赏