禁用瀏覽器調試工具

在某些情況我們可能會需要禁止用戶打開瀏覽器的調試面板來對頁面做一些簡單的安全保護，以下是我整理的一些方法：

一、禁止選中

禁止選中主要是防止用戶復制文字和圖片，樣式中禁用即可：

/*禁止選中*/ 
body{ 
    -moz-user-select: none; /*火狐*/ 
    -webkit-user-select: none; /*webkit瀏覽器*/ 
    -ms-user-select: none; /*IE10*/ 
    -khtml-user-select: none; /*早期瀏覽器*/ 
    user-select: none; 
}

如果只是禁止部分區域的話，直接在標簽上加上onselectstart=“return false”

<div onselectstart="return false">
	此區域禁止復制
</div>

或者

<div onselectstart="return false" id="copy" >
	此區域禁止復制
</div>

<script type="text/javascript" >
$(document).ready(function(){
    document.getElementById('copy').onselectstart =function(){  //禁止選中
        return false;
    };
});
</script>

二、禁用F12

對於使用F12打開調試窗口的方法，我們只要注冊F12按鍵的處理方法，並阻止默認事件行為即可：

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

三、禁用鼠標右鍵

對於使用右鍵菜單，在右鍵菜單里面選擇查看源代碼的行為，只要覆蓋右鍵菜單點擊事件的行為就即可：

// 為右鍵添加自定義事件，可以禁用
window.oncontextmenu = function() {
	event.preventDefault(); // 阻止默認事件行為
    return false;
}

四、禁用預先調試

另外用戶也可以通過瀏覽器菜單打開開發者工具來開啟調試窗口，還有諸如 shift+ctrl+i 的快捷鍵打開控制台。這種情況咱們就每秒檢查一次控制台是否打開，如果打開就讓他走。

var threshold = 160; // 打開控制台的寬或高閾值
// 每秒檢查一次
setInterval(function() {
	if (window.outerWidth - window.innerWidth > threshold || 
	window.outerHeight - window.innerHeight > threshold) {
		// 如果打開控制台，則關閉控制台
		window.close();  
        window.location = "about:blank";  
	}
}, 1e3);

這種方法對於像IE8這種，打開調試窗口是在一個新的Windows窗口中，而不是在當前頁面的下面或者上面的情況會失效。

到這已經可以阻止一大部分人了，但是如果別人想看你的代碼的欲望比較強，那咱也攔不住。

也就是如果調試窗口是在新的窗口那此代碼就不能阻止到他，就算排除這種情況也還可以在瀏覽器設置中禁用Javascript再打開調試，不過對於一般情況已經完全夠用。