javascript检测浏览器开发者工具debugger是否打开

2023-09-15 06:52:05
498
javascript debugger 浏览器 开发者工具

本文主要讨论前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板。

 

debugger

一种常见的方法是使用 debugger，当打开开发者工具时会有 debugger 暂停，效果类似于程序中的断点，点继续调试的时候也是如此。

1
2
3
4
5
6
7
8
9
10
 		<!DOCTYPE html>
<body>
    <script>
        function check() {
            debugger;
            setTimeout(check, 1);
        }
        check();
    </script>
</body>
 

破解方法

对于这种方法，我们只需要禁用 debugger 就行，最简单的方法就是点击开发中工具中的 deactivated breakpoints
 

 

禁用右键和 F12

禁用 F12 和右键，使得无法打开开发者工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 		<!DOCTYPE html>

<body>
    <script>
        // F12
        window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
            // 判断是否按下F12，F12键码为123  
            if (event.keyCode = 123) {
                event.preventDefault(); // 阻止默认事件行为  
                window.event.returnValue = false;
            }
        }
        // 右键
        document.oncontextmenu = function () {
            event.returnValue = false;
        }
    </script>
</body>
 

破解方法

按下 ctrl+shift+I 或者点击 chrome 浏览器头像右侧的地方里面的更多工具->开发者工具

 

检测窗口大小变化

window.outerHeight 和 window.outerWidth 返回整个浏览器窗口的高度，宽度，包括侧边栏（如果存在）。window.innerHeight 和 window.innerWidth 返回浏览器视窗大小，如果有滚动条也包含滚动条。

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 		<!DOCTYPE html>

<body>
    <script>
        const devtools = {
            isOpen: false,
            orientation: undefined,
        };
        
        // inner和outer之间大小的阈值
        const threshold = 170;
        // 定义监听开发者工具事件
        const emitEvent = (isOpen, orientation) => {
            globalThis.dispatchEvent(new globalThis.CustomEvent('devtoolschange', {
                detail: {
                    isOpen,
                    orientation,
                },
            }));
        };

        const main = ({ emitEvents = true } = {}) => {
            const widthThreshold = globalThis.outerWidth - globalThis.innerWidth > threshold;
            const heightThreshold = globalThis.outerHeight - globalThis.innerHeight > threshold;
            const orientation = widthThreshold ? 'vertical' : 'horizontal';

            if (
                !(heightThreshold && widthThreshold)
                && ((globalThis.Firebug && globalThis.Firebug.chrome && globalThis.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
            ) {
                // 有超过阈值 是打开的
                if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
                    emitEvent(true, orientation);
                }

                devtools.isOpen = true;
                devtools.orientation = orientation;
            } else {
                // 开发者工具未打开
                if (devtools.isOpen && emitEvents) {
                    emitEvent(false, undefined);
                }

                devtools.isOpen = false;
                devtools.orientation = undefined;
            }
        };

        main({ emitEvents: false });
        setInterval(main, 500);
        window.addEventListener('devtoolschange', event => {
            console.log(event.detail.isOpen)
        });
    </script>
</body>
 

破解方法

破解方法就是将开发者工具设置为独立窗口，这样就无法检测到窗口变化。
 

重写 toString

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 		//方法1
var x = document.createElement('div');
Object.defineProperty(x, 'id', {
    get:function(){
        // 开发者工具被打开
    }
});
console.log(x);
//方法2
var c = new RegExp("1");
c.toString = function(){
  // 开发者工具被打开
}
console.log(c);
 

破解方法

对于一些使用 console 判断的可以把 console 的输出失效。此插件可以解决问题：https://github.com/546669204/fuck-debugger-extensions

 

可以在以下开源项目中了解更多相关解决方法。

https://github.com/AEPKILL/devtools-detector