前言

大家好哇，今天我们来谈谈浏览器控制台的那点事儿，作为一名程序员来说，肯定是不希望自己的代码被别人反复地调试，万一被别人调试出 bug 怎么办？被不怀好意的人获取接口信息恶意攻击怎么办？所以，这时候 JavaScript 防审查开启控制台就很有必要了~As4拜客生活常识网

As4拜客生活常识网

众所周知，要开启控制台，有三种方法，As4拜客生活常识网

• F12
• 右键==》检查
• 浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i）

As4拜客生活常识网

需要注意的是：前两种都是可以通过代码阻止的，但是最后一种打开控制台的方式是无法被阻止掉的。那么下面我们就从这个角度出发，好好了解一下这个过程~As4拜客生活常识网

1、阻止打开控制台

能阻止就先阻止，把打开控制台的举动扼杀在摇篮之中~As4拜客生活常识网

阻止 F12 事件As4拜客生活常识网

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

2、阻止右键事件

为右键添加自定义事件，可以禁用 oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。As4拜客生活常识网

window.oncontextmenu = function() {  
    event.preventDefault() // 阻止默认事件行为  
    return false  
}

3、JS 操作控制台

虽然阻止了部分能打开控制台的方式，但还是会有漏网之鱼通过浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i） 的方式打开控制台，那么我们就需要在打开后的控制台上再做点文章了As4拜客生活常识网

定时检查浏览器窗口的变化As4拜客生活常识网

如果打开了控制台，浏览器窗口就会发生变化，利用这个特点，我们可以做出如下的监听：As4拜客生活常识网

let threshold = 160 // 打开控制台的宽或高阈值  
window.setInterval(function() {  
    if (window.outerWidth - window.innerWidth > threshold ||   
    window.outerHeight - window.innerHeight > threshold) {  
        // 如果打开控制台，则刷新页面  
        window.location.reload()  
    }  
}, 1000)

let threshold = 160 // 打开控制台的宽或高阈值  
            window.setInterval(function() {  
                if (window.outerWidth - window.innerWidth > threshold ||   
                window.outerHeight - window.innerHeight > threshold) {  
                    
                  // 如果打开控制台，则刷新页面  
                  window.location.reload()  ；
                  // 如果打开控制台，打开其他链接
                     toDevtools
                   // 如果打开控制台，关闭本窗口
                   closewin();

                }  
            }, 1000)


	// 如果打开控制台，打开其他链接
     function toDevtools(){

            let num = 0
            var devtools = new Date()
            devtools.toString = function() {
                num++;
                if(num>0){
                    window.location.href = "http://www.baidu.com";
                    alert('控制台打开了');
                    // 可以写刷新或者跳转的逻辑
                }
            }
            console.log(devtools);
        }

		 // 如果打开控制台，关闭本窗口
        function closewin()
        {
            self.opener=null;
            self.close();
        }

当然，如果用户把控制台改为了悬浮窗口模式，那么这个监听就会无效，并且当用户切换为非全屏的时候，可能也会误触此函数，所以这个方法还是有一点过的缺陷，可以做个补充。As4拜客生活常识网

后记

今天分享的内容希望对你有所帮助，通过以上代码可以监听到控制台是否被打开以及后续的逻辑操作，防止别人进行代码调试，在实际应用中的场景还是蛮多的~As4拜客生活常识网

最重要的：As4拜客生活常识网

以上介绍的是基本原理和实现方法，但是对于悬浮控制台模式下的还是没有很好地解决，但是我还是在一个网站上，找到一段神秘代码，可以关注我私信获取，如果网站加载了这段神秘代码，会让打开者后悔打开了调试模式

相关阅读: