最近接到产品任务，输出前台AI智能客服助手，效果图是参考武汉人民政府的AI+政务问答，那么作为设计师肯定是要学习（借鉴）下大佬的代码或素材的，于是在打开该网页后按下F12，页面就被强制跳转到了网站首页，后面试了几次均会跳转。

故此便在思考，该网页是不是特意加上了防检查代码，预防代码或资源泄露，通过查询资料得知，前端通常有几种检测的方法：

1、控制台检测

// 检测控制台是否打开
let devtools = /./;
devtools.toString = function() {
  this.opened = true;
  return '';
};

console.log('%c', devtools);

setInterval(function() {
  if(devtools.opened) {
    console.log('开发者工具已打开!');
    devtools.opened = false;
    
  }
}, 1000);

2、窗口大小差异检测

// 检测窗口大小变化（开发者工具打开会影响窗口布局）
const threshold = 160; // 阈值
const widthThreshold = window.outerWidth - window.innerWidth > threshold;
const heightThreshold = window.outerHeight - window.innerHeight > threshold;

if (widthThreshold || heightThreshold) {
  console.log('开发者工具可能已打开');
}

3、调试器检测

// 使用debugger语句检测
let isOpened = false;
function detectDevTool() {
  const start = Date.now();
  debugger;
  if (Date.now() - start > 100) {
    isOpened = true;
  }
}
detectDevTool();
console.log('开发者工具状态:', isOpened ? '打开' : '关闭');

4、性能检测

// 检测执行时间差异
let lastTime = performance.now();
setInterval(() => {
  const currentTime = performance.now();
  if (currentTime - lastTime > 200) {
    console.log('开发者工具可能已打开');
  }
  lastTime = currentTime;
}, 1000);

所谓道高一尺魔高一丈，虽以上方法都不是完全有效可靠，但用于应对一般用户足够了。

作为一名拥有前端技术的用户，要如何防止被检测呢？

1、禁用JS脚本，这个可以通过浏览器扩展实现（对页面渲染有影响）

2、提前打开F12，预防脚本通过窗口大小检测

3、防止控制台检测 opened=true

以武汉人民政府的AI助手页面为例，试了多个方法之后都无用，仍会跳转，那么猜到是用的「控制台检测」，要防止被检测，可以用以下方法:

1、打开一个空白页面，先行按F12运行开发者工具

2、在控制台中输入以下代码，但别先运行

// 在页面加载前运行（通过浏览器扩展或开发者工具）
Object.defineProperty(window, 'devtools', {
  get: () => ({ opened: false }),
  configurable: false,
  enumerable: false
});

// 防止通过 console.log 检测
console.log = function() {};
console.warn = function() {};
console.error = function() {};

3、然后在空白页面输入网址直接访问，接着考验手速

4、在页面还是空白加载状态的时候，在控制台中迅速按回车运行

一次操作后若未成功可以重试多几次，以下是成功后的界面：