检测网页是否打开开发者工具(控制台)

1,550 阅读1分钟

背景:由于某个单页面暴露了敏感代码 需要禁用控制台

  • 控制台禁止打开(防止F12和shift+ctrl+i调起开发者工具)
    document.οncοntextmenu = function () { return false; };
    document.onselectstart = function () { return false; };
    document.oncontextmenu = function () { return false; };
    //在本网页的任何键盘敲击事件都是无效操作 (防止F12和shift+ctrl+i调起开发者工具)  
    window.onkeydown = window.onkeyup = window.onkeypress = function () {
      return false;
    }
    //禁用开发者工具F12
    document.onkeydown = function () {
      if (window.event && window.event.keyCode == 123) {
        return false;
      }
    };

存在bug:通过浏览器 更多工具》开发者工具 调起控制台

  • 检测控制台是否打开(判断屏幕宽度或高度为满屏状态)
    var threshold = 160; // 打开控制台的宽或高阈值
    if (window.outerWidth - window.innerWidth > threshold ||
      window.outerHeight - window.innerHeight > threshold) {
      // 如果打开控制台,则刷新页面
      // window.location.reload();
      // 如果打开控制台,关闭当前页面
      window.opener = null;
      window.open(" ", "_self")
      window.close();
    }

拓展: 通过引入插件 用的github上的比较好的项目devtools-detect
利用isOpen检测控制台是否打开,检测到控制台打开,就执行关闭当前页

    window.opener=null;
    window.open(" ","_self")
    window.close();