禁止用戶打開HTML頁面調試
有些時候，我們可能想要禁止用戶修改或者調試我們HTML頁面的代碼，這個時候需要組織用戶打開調試窗口，下面介紹一些能夠阻止用戶在瀏覽器中打開調試窗口的方法，這些方法只能一定程度的提高打開調試的門檻，並不能完全杜絕。
禁用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;
}
禁用預先調試
就算是同時禁用掉F12和右鍵，用戶還是可以提前打開調試窗口，然後在地址中輸入網址，這樣就算不用右鍵和F12也是打開調試窗口的。
另外用戶也可以通過瀏覽器菜單打開開發者工具來開啓調試窗口，還有諸如 shift+ctrl+i 的快捷鍵打開控制檯。
對於這種預先打開調試窗口的方法，我們可以通過比較屏幕 window.outerWidth 和頁面可見內容區域 window.innerWidth 的差距判斷是否打開控制檯。
var threshold = 160; // 打開控制檯的寬或高閾值
// 每秒檢查一次
setInternet(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
// 如果打開控制檯，則刷新頁面
window.location.reload();
}
}, 1e3);
這種方法對於像IE8這種，打開調試窗口是在一個新的Windows窗口中，而不是在當前頁面的下面或者上面的情況會失效。
有效禁止查看 html 源代碼和是否打開防調試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 反調試函數,參數：開關，執行代碼
function endebug(off, code) {
if (!off) {
!function (e) {
function n(e) {
function n() {
return u
}
function o() {
window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized ? t("on") : (a = "off", console.log(d), console.clear(), t(a))
}
function t(e) {
u !== e && (u = e, "function" == typeof c.onchange && c.onchange(e))
}
function r() {
l || (l = !0, window.removeEventListener("resize", o), clearInterval(f))
}
"function" == typeof e && (e = {
onchange: e
});
var i = (e = e || {}).delay || 500,
c = {};
c.onchange = e.onchange;
var a, d = new Image;
d.__defineGetter__("id", function () {
a = "on"
});
var u = "unknown";
c.getStatus = n;
var f = setInterval(o, i);
window.addEventListener("resize", o);
var l;
return c.free = r, c
}
var o = o || {};
o.create = n, "function" == typeof define ? (define.amd || define.cmd) && define(function () {
return o
}) : "undefined" != typeof module && module.exports ? module.exports = o : window.jdetects = o
}(), jdetects.create(function (e) {
var a = 0;
var n = setInterval(function () {
if ("on" == e) {
setTimeout(function () {
if (a == 0) {
a = 1;
setTimeout(code);
}
}, 200)
}
}, 100)
})
}
}
</script>
</head>
<body>
<h1>你可以看見嗎？</h1>
<script type="text/javascript">
endebug(false, function () {
// 非法調試執行的代碼(不要使用控制檯輸出的提醒)
document.write("檢測到非法調試,請關閉後刷新重試!");
});
</script>
</body>
</html>