前端页面禁止别人调试的方法

前端页面禁止别人调试的方法并非绝对可行，但可以一定程度上增加安全性和难度。以下是几种常见的方法：

1. 关键代码混淆

使用 JavaScript 的混淆工具可以将代码转换为难以理解和修改的形式。可以在构建前的自动化任务中使用工具，例如 UglifyJS。

示例代码：

function hi() {
   var a = "hello ";
   var b = "world!";
   return a + b;
}

混淆后的代码：

function hi(){return"hello world!"}

2. 禁用开发者工具

使用 JavaScript 检测开发者工具和控制台，并在检测到时禁用不必要的功能。这个方法很容易被绕过，因此不应该依赖它。

示例代码：

(function() {
   'use strict';

   var devtools = {
     isOpen: false,
     interval: null
   };

   devtools.interval = setInterval(function () {
     if (window.devtools.isOpen === true || window.chrome.devtools === true) {
       clearInterval(devtools.interval);
       return false;
     }
     console.log('DevTools check');
   }, 1000);

   window.addEventListener('resize', function () {
     if (devtools.isOpen === false) {
       if (window.outerWidth - window.innerWidth > 100 || window.outerHeight - window.innerHeight > 100) {
         devtools.isOpen = true;
       }
     }
   });
})();

3. 使用 CSS 属性 user-select 禁用选择和复制

设置 HTML 和 BODY 的 user-select 属性为 none 或禁用右键菜单可以防止网站的信息被复制和粘贴。这种方法不适用于专业的网站在用户方面的易用性。

示例 CSS 代码：

html, body {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
   -ms-text-size-adjust: none;
   text-size-adjust: none;
}