检测F12控制台是否开启

发表于 分类于 阅读次数： 本文字数： 419 阅读时长 ≈ 2 分钟

前言

吧友提到了拦截控制台的情况。别人页面中有个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>

参考资料