前端页面怎么限制用户打开浏览器控制台？

说在前面

作为一名开发，相信大家对于浏览器控制台都是不陌生的，平时页面一出问题第一反应总是先打开控制台看看报错信息，而且还可以在控制台里插入自己的脚本信息来修改页面逻辑，那么你有没有想过 怎么限制用户打开控制台 呢？

禁用右键菜单 🔨

添加图片注释，不超过 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，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。