说在前面
作为一名开发，相信大家对于浏览器控制台都是不陌生的，平时页面一出问题第一反应总是先打开控制台看看报错信息，而且还可以在控制台里插入自己的脚本信息来修改页面逻辑，那么你有没有想过 怎么限制用户打开控制台 呢？
禁用右键菜单 🔨
添加图片注释，不超过 140 字（可选）
在页面上点击鼠标右键我们可以看到有个 检查 选项，通过这个菜单可以直接打开控制台，我们可以直接在这个页面上禁用右键菜单。
document.addEventListener("contextmenu", e => e.preventDefault());
加上这段代码后用户在页面上点击右键就不会有反应了。
拦截快捷键 🛑
除了右键菜单栏，还有最经典的 F12 ，通过 F12 快捷键也可以快速打开控制台，所以我们也可以将这个快捷键给拦截掉
document.addEventListener("keydown", e => {
if (e.keyCode === 123) {
e.preventDefault();
}
});
那么除了 F12 你知道还有什么快捷键可以打开控制台吗？
- Ctrl+Shift+C
- Ctrl+Shift+I
上面这两个快捷键也可以打开控制台，还有一个快捷键 Ctrl+U 可以打开源码页面，这里我们也可以一起把它给拦截掉。
document.addEventListener("keydown", e => {
if (e.keyCode === 123 || // F12
(e.ctrlKey && e.shiftKey && e.keyCode === 67) || // Ctrl+Shift+C
(e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I
(e.ctrlKey && e.keyCode === 85)) { // Ctrl+U
e.preventDefault();
}
});
加上这段代码后用户在页面上按下这些快捷键就不会有反应了。
检测窗口变化🔷
加上前面的拦截之后，其实我们还是有办法打开控制台，可以通过浏览器设置来打开控制台，这里的入口我们并无法监听拦截到
添加图片注释，不超过 140 字（可选）
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
);
}
通常默认是会在页面内靠边打开控制台，所以可以通过监听页面大小变化来简单判断是否打开控制台，监听到打开后直接跳转到空白页面。
添加图片注释，不超过 140 字（可选）
但是还有这么两种情况
- 全屏切换时的尺寸变化可能被误判
- 独立打开控制台页面时无法监听到
无限Debugger⚡
我们还可以通过 Function("debugger") 来动态生成断点（动态生成是为了防断点禁用），通过无限循环生成断点，让页面一直处于断点状态。
(() => {
function block() {
setInterval(() => {
(function(){return false;})["constructor"]("debugger")["call"]();
}, 50);
}
try { block(); } catch (err) {}
})();
添加图片注释，不超过 140 字（可选）
虽然我们可以通过一些技术手段，给用户打开控制台设置一些障碍，但对于经验老到的用户而言，绕过这些限制并非难事。依赖前端技术拦截控制台访问是一种典型的“防君子不防小人”策略，不能想着靠这些手段来保障自己网站的安全。
公众号
关注公众号『 前端也能这么有趣 』，获取更多有趣内容。
发送 加群 还可以加入群聊，一起来学习（摸鱼）吧~
说在后面
🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。
