前端如何控制用户打开控制台

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

1.禁用右键菜单 

        在页面上点击鼠标右键我们可以看到有个 检查 选项，通过这个菜单可以直接打开控制台，我们可以直接在这个页面上禁用右键菜单。加上这段代码后用户在页面上点击右键就不会有反应了。

document.addEventListener("contextmenu", e => e.preventDefault());  

2.拦截快捷键

        除了右键菜单栏，还有最经典的 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();  
  }  
});  

   加上这段代码后用户在页面上按下这些快捷键就不会有反应了。

3.检测窗口变化

        加上前面的拦截之后，其实我们还是有办法打开控制台，可以通过浏览器设置来打开控制台，这里的入口我们并无法监听拦截到，那么就再给一段代码

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
  );
}

        通常默认是会在页面内靠边打开控制台，所以可以通过监听页面大小变化来简单判断是否打开控制台，监听到打开后直接跳转到空白页面。

        但是还有这么两种情况

• 全屏切换时的尺寸变化可能被误判
• 独立打开控制台页面时无法监听到

4.无限Debugger

        我们还可以通过 Function("debugger") 来动态生成断点（动态生成是为了防断点禁用），通过无限循环生成断点，让页面一直处于断点状态。

(() => {  
  function block() {  
    setInterval(() => {  
      (function(){return false;})["constructor"]("debugger")["call"]();  
    }, 50);  
  }  
  try { block(); } catch (err) {}  
})();  

        虽然我们可以通过一些技术手段，给用户打开控制台设置一些障碍，但对于经验老到的用户而言，绕过这些限制并非难事。依赖前端技术拦截控制台访问是一种典型的“防君子不防小人”策略，不能想着靠这些手段来保障自己网站的安全。