前言
宝子们，今天咱们来唠唠前端页面里一个挺有意思的事儿 —— 怎么限制用户打开浏览器控制台。作为前端开发人员，浏览器控制台那可是我们的好帮手，平常页面要是有点 “小脾气”，我们第一个念头就是打开控制台瞅瞅报错信息。不过呢，有时候我们可能不希望用户随随便便就打开控制台，那该咋办呢？别急，今天就给大家分享几种实用的方法。
禁用右键菜单，堵住 “检查” 捷径
大家都知道，点击鼠标右键会弹出个菜单，里面有 “检查” 这个选项，轻轻一点，控制台就出来了。那我们要是把右键菜单给禁用了呢？试试下面这行代码：
document.addEventListener("contextmenu", e => e.preventDefault());
有了这行代码，用户在页面上点击右键，就不会再出现那个熟悉的小菜单啦，自然也就没办法通过右键菜单里的 “检查” 来打开控制台了，是不是很简单呢？不过呢，这只是把右键菜单这一条路给堵住了，还有别的路能通向控制台呢，咱们接着往下看。
拦截快捷键，封住 “快速通道”
除了右键菜单，大家是不是还经常用快捷键来打开控制台呢？像 F12，那可是最经典的快捷键了，轻轻一按，控制台就冒出来了。不过别担心，我们也能把这快捷键给 “挡住”。
咱先来截断 F12 这条路：
document.addEventListener("keydown", e => { if (e.keyCode === 123) { e.preventDefault(); } });
这样一来，用户按下 F12 就没啥反应啦。不过呢，能打开控制台的快捷键可不止 F12 呢，像 Ctrl + Shift + C、Ctrl + Shift + I 也能打开控制台，还有一个 Ctrl + U 是打开源码页面的。那咱就一股脑儿把它们都给拦截掉，用下面这段代码：
document.addEventListener("keydown", e => { if (e.keyCode === 123 || (e.ctrlKey && e.shiftKey && e.keyCode === 67) || (e.ctrlKey && e.shiftKey && e.keyCode === 73) || (e.ctrlKey && e.keyCode === 85)) { e.preventDefault(); } });
这样一来，用户再想通过这些快捷键打开控制台，那可就没那么容易啦。
检测窗口变化，揪出 “隐蔽入口”
即便我们把右键菜单和快捷键都拦截了，还是有别的路能打开控制台呢，比如通过浏览器设置里的入口。这个入口咱们没办法直接监听，不过呢，我们可以从别的角度来 “猜测” 用户是不是打开了控制台。
当用户在页面内靠边打开控制台时，窗口的尺寸会发生变化。那咱们就监听一下窗口大小的变化，要是发现变化有点 “异常”，就有可能是用户打开了控制台。来看看这段代码：
let lastWidth = window.innerWidth;
let lastHeight = window.innerHeight;
window.addEventListener("resize", () => {
const widthDiff = Math.abs(window.innerWidth - lastWidth);
const heightDiff = Math.abs(window.innerHeight - lastHeight);
if ((widthDiff > 50 || heightDiff > 50) && !isFullScreen()) {
window.location.href = "about:blank";
alert("检测到异常窗口变化，请关闭开发者工具");
}
lastWidth = window.innerWidth;
lastHeight = window.innerHeight;
});
function isFullScreen() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
}
这段代码的思路就是，如果窗口尺寸变化比较大，而且不是全屏切换导致的，就直接把页面跳转到空白页，还弹出个提示，让用户体验一下 “此路不通” 的感觉。不过呢，这种方法也有点小瑕疵，比如全屏切换时的尺寸变化可能会被误判，还有要是用户把控制台单独开在一个页面里，咱们就没办法监听到了。
无限 debugger，让页面 “卡” 住
还有一种比较 “狠” 的办法，就是用 Function("debugger") 来动态生成断点，然后让页面一直处于断点状态。咱们看看这个代码：
(() => {
function block() {
setInterval(() => {
(function(){return false;})["constructor"]("debugger")["call"]();
}, 50);
}
try { block(); } catch (err) {}
})();
这个方法呢，就是通过不断地生成断点，让页面像是被 “卡” 住了一样。不过呢，这种方法有点 “激进”，可能会对页面的性能产生影响，使用的时候得谨慎一点。
宝子们，虽然咱们可以通过这些方法给用户打开控制台设置一些障碍，但对于那些经验丰富的用户来说，要想绕过这些限制，那还是有办法的。所以说呢，这些方法只能算是 “防君子不防小人”，不能把它们当作保障网站安全的 “万能锁”。不过呢，了解这些技巧，说不定在某些特殊场景下，能帮咱们解决一些小问题呢。
今天就和大家唠到这儿啦，希望对宝子们有所帮助。要是宝子们还有别的想法或者疑问，欢迎在评论区留言交流哦。
