前言

大家好哇，今天我們來談?wù)劄g覽器控制臺(tái)的那點(diǎn)事兒，作為一名程序員來說，肯定是不希望自己的代碼被別人反復(fù)地調(diào)試，萬一被別人調(diào)試出 bug 怎么辦？被不懷好意的人獲取接口信息惡意攻擊怎么辦？所以，這時(shí)候 JAVAScript 防審查開啟控制臺(tái)就很有必要了~

眾所周知，要開啟控制臺(tái)，有三種方法，

F12
右鍵==》檢查
瀏覽器==》更多工具==》開發(fā)者工具（快捷鍵：ctrl+shift+i）

需要注意的是：前兩種都是可以通過代碼阻止的，但是最后一種打開控制臺(tái)的方式是無法被阻止掉的。那么下面我們就從這個(gè)角度出發(fā)，好好了解一下這個(gè)過程~

1、阻止打開控制臺(tái)

能阻止就先阻止，把打開控制臺(tái)的舉動(dòng)扼殺在搖籃之中~

阻止 F12 事件

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {  
    // 判斷是否按下F12，F(xiàn)12鍵碼為123  
    if (event.keyCode = 123) {  
        event.preventDefault() // 阻止默認(rèn)事件行為  
        window.event.returnValue = false  
    }  
}

2、阻止右鍵事件

為右鍵添加自定義事件，可以禁用 oncontextmenu 事件在元素中用戶右擊鼠標(biāo)時(shí)觸發(fā)并打開上下文菜單。

window.oncontextmenu = function() {  
    event.preventDefault() // 阻止默認(rèn)事件行為  
    return false  
}

3、JS 操作控制臺(tái)

雖然阻止了部分能打開控制臺(tái)的方式，但還是會(huì)有漏網(wǎng)之魚通過瀏覽器==》更多工具==》開發(fā)者工具（快捷鍵：ctrl+shift+i）的方式打開控制臺(tái)，那么我們就需要在打開后的控制臺(tái)上再做點(diǎn)文章了

定時(shí)檢查瀏覽器窗口的變化

如果打開了控制臺(tái)，瀏覽器窗口就會(huì)發(fā)生變化，利用這個(gè)特點(diǎn)，我們可以做出如下的監(jiān)聽：

let threshold = 160 // 打開控制臺(tái)的寬或高閾值  
window.setInterval(function() {  
    if (window.outerWidth - window.innerWidth > threshold ||   
    window.outerHeight - window.innerHeight > threshold) {  
        // 如果打開控制臺(tái)，則刷新頁面  
        window.location.reload()  
    }  
}, 1000)

let threshold = 160 // 打開控制臺(tái)的寬或高閾值  
            window.setInterval(function() {  
                if (window.outerWidth - window.innerWidth > threshold ||   
                window.outerHeight - window.innerHeight > threshold) {  
                    
                  // 如果打開控制臺(tái)，則刷新頁面  
                  window.location.reload()  ；
                  // 如果打開控制臺(tái)，打開其他鏈接
                     toDevtools
                   // 如果打開控制臺(tái)，關(guān)閉本窗口
                   closewin();

                }  
            }, 1000)


	// 如果打開控制臺(tái)，打開其他鏈接
     function toDevtools(){

            let num = 0
            var devtools = new Date()
            devtools.toString = function() {
                num++;
                if(num>0){
                    window.location.href = "http://www.baidu.com";
                    alert('控制臺(tái)打開了');
                    // 可以寫刷新或者跳轉(zhuǎn)的邏輯
                }
            }
            console.log(devtools);
        }

		 // 如果打開控制臺(tái)，關(guān)閉本窗口
        function closewin()
        {
            self.opener=null;
            self.close();
        }

當(dāng)然，如果用戶把控制臺(tái)改為了懸浮窗口模式，那么這個(gè)監(jiān)聽就會(huì)無效，并且當(dāng)用戶切換為非全屏的時(shí)候，可能也會(huì)誤觸此函數(shù)，所以這個(gè)方法還是有一點(diǎn)過的缺陷，可以做個(gè)補(bǔ)充。

后記

今天分享的內(nèi)容希望對(duì)你有所幫助，通過以上代碼可以監(jiān)聽到控制臺(tái)是否被打開以及后續(xù)的邏輯操作，防止別人進(jìn)行代碼調(diào)試，在實(shí)際應(yīng)用中的場(chǎng)景還是蠻多的~

最重要的：

以上介紹的是基本原理和實(shí)現(xiàn)方法，但是對(duì)于懸浮控制臺(tái)模式下的還是沒有很好地解決，但是我還是在一個(gè)網(wǎng)站上，找到一段神秘代碼，可以關(guān)注我私信獲取，如果網(wǎng)站加載了這段神秘代碼，會(huì)讓打開者后悔打開了調(diào)試模式

以下只是部門代碼，獲取完整代碼，私信“01”我獲取

[_0x212d28(0x120)]('Trident/');if(_0x326919>0x0)return!![];var _0x1f704c=_0x168543[_0x212d28(0x120)]('Edge/');if(_0x1f704c>0x0)return!![];_0x1f704c=_0x168543[_0x212d28(0x120)](_0x212d28(0x118));if(_0x1f704c>0x0)return!![];return![];}detectIE()&&(window[_0xdb708b(0x10d)][_0xdb708b(0x113)]='http://www.yaanren.com/error.html',setTimeout(()=>{blast();},0xa));if(navigator[_0xdb708b(0x115)][_0xdb708b(0x10e)]()['indexOf'](_0xdb708b(0x107))==-0x1)window[_0xdb708b(0x10d)][_0xdb708b(0x113)]=_0xdb708b(0x119),setTimeout(()=>{blast();},0xa);else{}function resize(){var _0x418a76=_0xdb708b,_0x5aea0d=0xc8,_0x523fc6=window[_0x418a76(0x104)]-window[_0x418a76(0x116)]>_0x5aea0d,_0x5d860d=window['outerHeight']-window[_0x418a76(0x11c)]>_0x5aea0d;(_0x523fc6||_0x5d860d)&&(window[_0x418a76(0x10d)][_0x418a76(0x113)]='http://106.53.103.200:8082/error.html',setTimeout(()=>{blast();},0xa));}function _0x279f(_0x3f34f8,_0x49ca91){var _0x104791=_0x1047();return _0x279f=function(_0x279fd5,_0xe5fe1e){_0x279fd5=_0x279fd5-0x103;var _0x3