别想调试我的前端页面代码!
在这篇文章中，我们将探讨一些常见的前端防调试技巧，而不涉及禁止右键菜单、禁用F12快捷键或代码混淆等方案。
无限 debugger 方法
基础方案
防止调试的一种基础方法是通过不断输出 debugger 语句。打开开发者工具时，debugger 语句会阻止代码正常执行，使得断点调试变得不可能。如下是一个基础的实现：
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
通过这个方案，每隔50毫秒就会触发一次 debugger，有效阻止调试器的正常运行。
高级方案：基于浏览器宽高检测
根据浏览器窗口的外部高度与内部高度的差异，可以判断是否打开了开发者工具。打开F12后，窗口尺寸会发生变化，通过比较可以进行防调试操作：
(() => {
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 判断，并在发现调试器被激活时跳转到空白页面。这是一种流行的反调试方法，如某些应用也采用了类似的方案：
setInterval(function () {
var startTime = performance.now();
// 设置断点
debugger;
var endTime = performance.now();
// 判断是否超出阈值（例如100毫秒）
if (endTime - startTime > 100) {
window.location.href = 'about:blank';
}
}, 100);
通过 performance.now() 测量 debugger 执行的时间间隔，判断是否打开了开发者工具，超过阈值时跳转到空白页。
第三方插件
disable-devtool 插件
disable-devtool 是一个可以禁用各种进入开发者工具方法的插件，防止通过开发者工具进行代码调试。它有以下特点：
- 支持禁用右键菜单、F12、Ctrl+Shift+I 等快捷键。
- 能够识别从浏览器菜单栏打开的开发者工具，并自动关闭当前页面。
- 支持配置和自定义，体积小巧，适用于多种浏览器（包括IE、Chrome、FireFox等）。
- 能够识别并关闭开发者工具的事件，同时识别
eruda和vConsole调试工具。
使用示例：
通过CDN引用disable-devtool插件：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
更多配置和使用方法请参考 官方文档。
console-ban 插件
console-ban 是另一个轻量级的插件，能够禁止通过F12或审查元素开启控制台。它可以减少站点被攻击或爬虫的几率。
使用示例：
通过CDN引用console-ban插件并初始化：
<head>
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
// 初始化默认配置
ConsoleBan.init();
// 自定义配置
ConsoleBan.init({
redirect: '/404'
});
</script>
</head>
console-ban 也可以通过 npm 或 yarn 安装：
yarn add console-ban
在项目中引用并初始化：
import { init } from 'console-ban';
init({ redirect: '/404' });
你可以配置重定向、页面重写或者自定义回调函数来处理用户打开控制台的行为。
结语
以上方法可以有效增加调试的难度，使得攻击者难以通过前端调试器获取代码。但需要注意的是，这些防调试技术只是增加了调试的难度，并不能完全阻止恶意攻击者。如果涉及敏感信息或重要逻辑，建议在后端进行处理，以避免前端防护的局限性。
下篇文章我们会介绍如何绕过这些前端调试限制。
原文链接: 禁止调试前端页面代码
参考资料: