前端代码混淆后怎么防 DevTools 调试？

Tr° 红瑞提问于 2026-03-20 16:44:21 阅读 13

安全

我用 Vue 写了个小项目，为了防止别人轻易看懂逻辑，用了 JavaScript 混淆工具处理了代码。但发现只要打开 DevTools，断点一打还是能一步步跟进去看变量和流程，这不就白混淆了？有没有办法检测或阻止 DevTools 打开？

试过网上说的 debugger 死循环或者检测 console 尺寸的方法，但要么被浏览器拦截，要么影响正常调试。下面是我混淆前的一段 Vue 组件代码：

<template>
  <div>{{ secretData }}</div>
</template>

<script>
export default {
  data() {
    return { secretData: 'important_info' }
  },
  mounted() {
    // 这里有敏感逻辑，不想被轻易调试
  }
}
</script>

代码混淆

我来解答赞 1 收藏

反馈

1 条解答

轩辕新艳 Lv1

直接上代码，用 MutationObserver 检测 DevTools 打开：

const devtools = /./;

devtools.toString = function() { this.opened = true; };

console.log(devtools);

window.addEventListener('load', function() {

  setInterval(() => {

    if (devtools.opened) {

      // 阻止调试的逻辑，比如重定向或清除数据

      alert('DevTools detected!');

      // window.location.href = 'http://example.com';

    }

  }, 1000);

});

2026-03-20 17:00