别想调试我的前端代码！
作为Web开发者，我们都知道前端代码是公开的，任何人都可以轻易获取到我们的代码，因此不能将秘钥等敏感信息写在前端。为了避免他人轻易看懂或调试前端代码，通常我们会采取压缩、混淆等处理。今天的文章将介绍几种避免他人调试前端代码的常见方法，感兴趣的同学可以在自己的项目中尝试一下。
1. 无限debugger
前端页面防止调试的一种常见方法是通过不断触发 debugger 语句来阻止调试。当调试器打开时，debugger 会立即执行，从而中断调试，网页的请求也无法正常查看。
基础方案：
(() => {
function ban() {
setInterval(() => { debugger; }, 50);
}
try {
ban();
} catch (err) { }
})();
在 setInterval 中的代码被写在一行后，即使用户尝试添加 logpoint 为 false，也无法有效阻止 debugger 的执行。即使通过格式化代码将其变成多行，也无法绕过这一防护。
2. 浏览器宽高检测
可以通过检测浏览器窗口的外部高度和宽度与内部高度和宽度的差值，判断用户是否打开了开发者工具。如果差值大于 200，则表明可能开启了调试工具，这时可以替换 HTML 内容为警告信息。
(() => {
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) { }
})();
3. 关闭断点并调整到空白页面
利用 debugger 的特性，如果用户打开了开发者工具，那么页面会被 debugger 语句卡住。我们可以利用这一点，通过时间间隔的判断来检测开发者工具的开启，并在检测到后立即跳转到空白页。
setInterval(function () {
var startTime = performance.now();
debugger;
var endTime = performance.now();
if (endTime - startTime > 100) {
window.location.href = 'about:blank';
}
}, 100);
4. 使用第三方插件
1. disable-devtool
disable-devtool 可以禁用各种进入开发者工具的方法，防止通过开发者工具进行代码查看或篡改。该库具备以下特性：
- 支持禁用右键菜单、F12 和
Ctrl+Shift+I等快捷键。 - 支持识别通过浏览器菜单栏打开开发者工具并关闭当前页面。
- 适用于几乎所有浏览器（IE、360、QQ浏览器、FireFox、Chrome、Edge...）。
- 支持npm引用和script标签引用，体积小巧，配置灵活。
使用示例：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
更多配置和使用方法详见官网：disable-devtool
2. console-ban
console-ban 是一个轻量级的方案，用于禁止F12或审查元素等行为，保护站点资源、减少爬虫和攻击。支持多种策略，如重定向、重写、自定义等。
使用示例：
<head>
<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
ConsoleBan.init({
redirect: '/404'
})
</script>
</head>
在项目中也可以通过npm安装使用：
yarn add console-ban
重定向策略：
ConsoleBan.init({
redirect: '/404',
});
重写页面策略：
var div = document.createElement('div');
div.innerHTML = '不要偷看啦~';
ConsoleBan.init({
write: div
});
结语
这些技术可以增加攻击者分析和调试代码的难度，但无法完全阻止恶意调试。因此，对于一些敏感信息或关键逻辑，最好的方式是在后端进行处理，而不是完全依赖前端来保护。