这里我们不介绍禁止右键菜单, 禁止F12快捷键和代码混淆方案。

#无限debugger

• 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输出断点，因为 debugger 在控制台被打开的时候就会执行

• 由于程序被 debugger 阻止，所以无法进行断点调试，所以网页的请求也是看不到的.

#基础方案

复制(() => { 
  function ban() { 
    setInterval(() => { 
      debugger; }, 50); 
  } 
  try { ban(); 
      } 
  catch (err) {
  } 
})();

• 将 setInterval 中的代码写在一行，可以禁止用户断点，即使添加 logpoint 为 false 也无用

• 当然即使有些人想到用左下角的格式化代码，将其变成多行也是没用的

#浏览器宽高

根据浏览器宽高、与打开F12后的宽高进行比对，有差值，说明打开了调试，则替换html内容；

• 通过检测窗口的外部高度和宽度与内部高度和宽度的差值，如果差值大于 200，就将页面内容设置为 "检测到非法调试"。

• 通过使用间隔为 50 毫秒的定时器，在每次间隔内执行一个函数，该函数通过创建一个包含 debugger 语句的函数，并立即调用该函数的方式来试图阻止调试器的正常使用。

复制(() => { function block() { if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) { document.body.innerHTML = "检测到非法调试"; } setInterval(() => { (function () { return false; } ['constructor']('debugger') ['call']()); }, 50); } try { block(); } catch (err) { } })();

#关闭断点，调整空页面

在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。(文心一言采用方案)

复制setInterval(function () { var startTime = performance.now(); // 设置断点 debugger; var endTime = performance.now(); // 设置一个阈值，例如100毫秒 if (endTime - startTime > 100) { window.location.href = 'about:blank'; } }, 100); 

#第三方插件

#disable-devtool

disable-devtool可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的代码搬运。

该库有以下特性:

1. 支持可配置是否禁用右键菜单

2. 禁用 f12 和 ctrl+shift+i 等快捷键

3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面

4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)

5. 多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）

6. 高度可配置、使用极简、体积小巧

7. 支持npm引用和script标签引用(属性配置)

8. 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能

9. 支持识别开发者工具关闭事件

10. 支持可配置是否禁用选择、复制、剪切、粘贴功能

11. 支持识别 eruda 和 vconsole 调试工具

12. 支持挂起和恢复探测器工作

13. 支持配置ignore属性，用以自定义控制是否启用探测器

14. 支持配置iframe中所有父页面的开发者工具禁用

🦂使用🦂

`<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script> `

更多使用方法参见官网：disable-devtool

#disable-devtool

console-ban禁止 F12 / 审查开启控制台，保护站点资源、减少爬虫和攻击的轻量方案，支持重定向、重写、自定义多种策略。

#使用

在项目中使用：

复制yarn add console-ban
import { init } from 'console-ban

init(options)  

#重定向

`ConsoleBan.init({ // 重定向至 /404 相对地址 redirect: '/404', // 重定向至绝对地址 redirect: 'http://domain.com/path' }) `

使用重定向策略可以将用户指引到友好的相关信息地址（如网站介绍），亦或是纯静态 404 页面，高防的边缘计算或验证码等页面。

注：若重定向后的地址可以通过 SPA 路由切换或 pjax 局部加载技术等进行非真正意义上的页面切换，则切换后的控制台监测将不会再次生效，对于 SPA 你可以在路由卫士处重新注册本实例，其他情况请引导至真正的其他页面。

#重写

`` `var div = document.createElement('div')
div.innerHTML = '不要偷看啦~'

ConsoleBan.init({
// 重写 body 为字符串
write: '

#不要偷看啦~

',
// 可传入节点对象
write: div
})
` ``

重写策略可以完全阻断对网站内容的审查，但较不友好，不推荐使用。

#回调函数

`ConsoleBan.init({ callback: () => { // ... } }) `

回调函数支持自定义打开控制台后的策略。

#参数

注：redirect、write、callback 三种策略只能取其一，优先使用回调函数。