移动端反调试怎么在Vue里实现？

博主婷婷提问于 2026-03-11 17:16:21 阅读 14

移动

我最近在做公司一个H5活动页，担心被人用Chrome DevTools调试扒代码，想加个简单的反调试。网上搜到一些方法，比如检测devtools或者断点，但在Vue项目里不知道怎么优雅地集成进去。

我试过在mounted里加检测逻辑，但好像很容易被绕过，而且一开调试器页面就卡死，体验也不好。有没有更靠谱的做法？下面是我目前的尝试：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  setInterval(() => {
    if (window.outerHeight - window.innerHeight > 200) {
      debugger
    }
  }, 1000)
})
</script>

移动端安全

我来解答赞 2 收藏

反馈

1 条解答

西门冰可 Lv1

你那个方法太糙了，outerHeight - innerHeight 这种检测在移动端基本没用，手机上调试器是独立的webview。

给你几个实际一点的方案：

方案一：定时器偏差检测（推荐）

调试器打开时setInterval会变慢，通过performance.now()检测时间差：

// 在main.js或App.vue的onMounted里

let lastTime = performance.now()

let count = 0



setInterval(() => {

  count++

  const now = performance.now()

  const diff = now - lastTime

  

  // 正常情况下两次调用间隔应该在10ms左右，调试器打开会远超这个值

  if (diff > 100) {    // 可以断开ws连接、清空localStorage、弹提示等

    console.clear()

    console.log('请关闭调试器后刷新')

    localStorage.clear()

  }

  lastTime = now

}, 50)

方案二：console检测

有些调试工具会重写console.log：

let consoleStyle = console.log.toString()

if (consoleStyle.indexOf('native code') === -1) {

  // 被重写了，说明有调试工具

  window.location.href = 'about:blank'

}

方案三：禁用右键和F12

document.oncontextmenu = () => false

document.onkeydown = (e) => {

  if (e.key === 'F12') return false

}

说句实在话，移动端H5做反调试意义不大。真正保护代码的手段是：

1. 上线前用terser或webpack-obfuscator混淆代码，这是最有效的
2. 接口加签名、请求加密，防止抓包
3. 核心逻辑放native端

你那个debugger直接卡死的做法太愣了，容易把正常用户坑进去。反调试只能增加一点调试成本，别指望能防住真想做手脚的人。

2026-03-11 17:17