JavaScript 前端防调试：从无限 debugger 到动态构造函数的进阶实现

作者：小括号时间：2026-10-31 05:42:53浏览：197

本文详解前端页面防调试的多种技术手段。从基础的无限 debugger 循环策略入手，分析其局限性及绕过方法；进而探讨单行代码与忽略列表的对抗；最后介绍通过动态构造函数生成临时脚本及检测窗口尺寸变化的终极增强方案，帮助开发者提升前端代码安全性，防止接口数据被恶意爬取。

🎈 为何需要禁止调试？

前端页面在运行过程中通常会调用大量接口，部分接口逻辑若暴露，容易被恶意用户通过爬虫工具进行分析，进而破解并获取敏感数据。
为彻底杜绝此类风险，最直接且有效的防御手段便是禁止用户调试前端代码。

🎈 基础策略：无限 debugger

前端防止调试的核心思路是利用 debugger 语句不断触发断点。当用户打开控制台时，debugger 语句会立即执行，导致程序执行流被强制暂停。
由于程序执行被 debugger 阻断，用户无法进行正常的断点调试操作，同时也无法查看网页发出的网络请求。
基础实现代码如下：

/**
* 基础禁止调试代码
*/
(() => {
    function ban() {
      setInterval(() => {
        debugger;
      }, 50);
    }
    try {
      ban();
    } catch (err) { }
})();

🎈 为何需要禁止调试？

🎈 应对无限 debugger 的策略

仅依靠上述简单的代码逻辑，对于具备一定技术能力的用户而言，防御效果十分有限。
攻击者可通过控制台中的 Deactivate breakpoints 按钮，或使用快捷键 Ctrl + F8 来关闭无限 debugger 机制。
尽管这种方法可以移除令人困扰的 debugger 弹窗，但攻击者仍可通过左侧行号手动添加 breakpoint 来绕过限制。

🎈 为何需要禁止调试？

🎈 禁止断点的进阶对策

若将 setInterval 中的代码压缩为单行，可有效禁止用户添加断点。即使攻击者将 logpoint 设置为 false，也无法生效。
此外，即便攻击者尝试使用左下角的格式化代码功能将其展开为多行，同样无法绕过限制。

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

🎈 为何需要禁止调试？

🎈 忽略执行的代码策略

用户可通过添加 add script ignore list 来指定需要忽略执行的代码行或文件。
此方法同样能达到阻止无限 debugger 执行的效果。

🎈 为何需要禁止调试？

🎈 针对忽略执行代码的对策

那么，如何进一步应对上述操作中的恶意用户呢？
可通过将 debugger 改写为 Function("debugger")(); 的形式来进行防御。
由 Function 构造函数生成的 debugger 会在每次执行时动态开启一个临时的 js 脚本文件，从而增加调试难度。
当然，在实际使用时，为了进一步提升安全性，建议对脚本进行加密后再部署使用。

// 加密前
(() => {
  function ban() {
    setInterval(() => {
      Function('debugger')();
    }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();
// 加密后
eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

🎈 为何需要禁止调试？

🎈 终极增强防调试代码

为使编写的代码更加晦涩难懂，需对上述逻辑进行进一步优化。
将 Function('debugger').call() 修改为 (function(){return false;})['constructor']('debugger')['call'](); 的形式。
同时增加条件判断，当窗口外部宽高与内部宽高的差值超过特定阈值时，将 body 中的内容替换为指定提示信息。
同样地，为了保障安全，建议在使用前对代码进行加密处理。

(() => {
  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) { }
})();

🎈 为何需要禁止调试？