Vue禁止打开控制台/前端禁止打开控制台方法/禁用F12/禁用右键

代码片段展示了如何在前端页面中禁用右键菜单、禁止文本选择、阻止特定键盘操作（如F12键打开开发者工具），以及通过检测窗口尺寸变化来尝试阻止用户调试页面。

 // 鼠标禁止右键禁止打开控制台及键盘禁用
    forbidden(){
       // 1.禁用右键菜单
      document.oncontextmenu = new Function("event.returnValue=false");
      // 2.禁用鼠标选中
      document.onselectstart = new Function("event.returnValue=false");

      document.onkeydown = () => {
        console.log(window.event.keyCode);
        if(window.event && window.event.keyCode == 123) {
          return false;
        }
      }
    },

    // 禁止别人调试前端页面代码‌，使用无限debugger‌
    pageTable(){
      /** 页面模块 */
      const block = () => {
        if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
          document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!";
          document.body.style.display = 'flex'
          document.body.style.justifyContent = 'center'
          document.body.style.alignItems = 'center'
        }
        setInterval(() => {
          (function () {
            return false;
          }
          ['constructor']('debugger')
          ['call']());
        }, 50);
      }
      /** 禁止调试 */
      const banDebugging = () => {
        try {
          block();
        } catch (err) {
          console.log({ err })
        }
      }

      let threshold = 160 // 打开控制台的宽或高阈值
      window.setInterval(function() {
        if (window.outerWidth - window.innerWidth > threshold ||
          window.outerHeight - window.innerHeight > threshold) {
          // 如果打开控制台，则禁止
          banDebugging();
        }
      }, 1000)
    }

• 认识到完全防止前端页面被调试是不可能的。即使是最复杂的反调试技术，经验丰富的开发者也能找到绕过的方法。

• 专注于保护敏感数据和逻辑，而不是试图阻止调试。例如，通过服务器端验证和加密来保护敏感信息。