前端代码混淆后怎么防止别人调试？

书生シ子晨提问于 2026-03-11 02:29:22 阅读 22

安全

我最近在做项目上线前的安全加固，用了 terser 做了代码压缩和混淆，但发现别人只要打开 DevTools 就能轻松打断点调试，甚至格式化代码看逻辑。我试过加 debugger 语句来干扰调试，但效果很差，反而影响自己开发。

网上有人说可以用无限 debugger + 时间检测的方式防调试，但我照着写了一段，结果在某些浏览器里直接卡死页面。下面是我尝试的代码：

(function () {
  let start = Date.now();
  debugger;
  if (Date.now() - start > 100) {
    // 被调试了，跳转或清空页面
    window.location.href = 'about:blank';
  }
})();

有没有更靠谱又不影响正常用户的方法？或者是不是前端根本防不住调试，只能靠后端校验？

代码混淆

我来解答赞 6 收藏

反馈

1 条解答

A. 彦鸽 Lv1

先说结论：前端防调试本质上是个"防君子不防小人"的事，阻止不了真正的硬核玩家，但能挡住大部分只会开 DevTools 抄逻辑的人。

你那个 debugger + 时间检测的方案会翻车是因为每次 page load 都会执行，而且 modern 浏览器的 debugger 暂停时间本身就不稳定，容易误判。正确的做法是检测 DevTools 打开这个事件，而不是检测执行时间。

核心思路就几个：

1. 检测 DevTools 打开

// 检测控制台打开

let checkDevTools = () => {

  const threshold = 160;

  setInterval(() => {

    const width = window.outerWidth - window.innerWidth;

    const height = window.outerHeight - window.innerHeight;

    if (width > threshold || height > threshold) {

      // 控制台被打开了

      document.body.innerHTML = '';

      document.head.innerHTML = '';

    }

  }, 500);

};



// 检测 console.log 被重写

const originalLog = console.log;

console.log = function(...args) {

  if (arguments.length > 0 && typeof arguments[0] === 'string' && arguments[0].includes('devtools')) {

    // 可能是检测脚本在探测

  }

  originalLog.apply(console, args);

};

2. 无限 debugger 要用条件触发，不能每次都卡

// 用随机概率触发，降低被发现的几率

setInterval(() => {

  if (Math.random() < 0.05) {  // 5% 概率

    debugger;

  }

}, 100);

3. 代码层面做些混淆和分片

关键业务逻辑别放在前端，或者放到 WebAssembly 里，或者直接走后端接口校验。前端算个 md5 都能被改掉，所以涉及安全敏感的逻辑必须后端验。

4. 加签名和完整性校验

加载时检测 script 标签的 integrity，或者自己实现一个简单的签名机制，如果检测到代码被改了就不执行核心逻辑。

最后回答你的问题：是的，涉及安全的逻辑别指望前端藏着。前端只能做到增加调试成本，真正的安全还是得靠后端校验+接口签名+频率限制+行为分析这些手段。你混淆代码主要是为了降低代码可读性、减小体积，别把它当安全防线。

2026-03-11 03:02