项目背景

大家都知道浏览器的开发者工具能干啥，正经的用法：开发时调试代码逻辑，修改布局样式；不正经的用法：改改元素骗骗人，找找网站接口写爬虫，逆向js破解加密等等，所以说前端不安全，永远不要相信用户的输入。

解决办法

前端代码防止被调试，无非就是打开控制台，卡住页面不让他往下走。有以下几种办法

1、打开控制台，无限debugger

2、打开控制台，无限加载

3、打开控制台，重定向到新的页面

无限debugger

先用debugger关键字阻止你进行任何操作，随后，在你关闭之后，又直接跳转到空白页，不让你接着操作。

onMounted(() => {
    // 定时检测开发者工具是否已打开
    setInterval(checkDevTools, 1000);
})

function checkDevTools() {
  const startTime = performance.now();
  // 设置断点
  // eslint-disable-next-line no-debugger
  debugger;
  const endTime = performance.now();
  // 设置一个阈值，例如100毫秒
  if (endTime - startTime > 100) {
    window.location.href = 'about:blank';
  }
}

测试

 

破解

这样确实可以阻挡住通过在开发者工具上获取信息，但是仅仅是浏览器场景。

如何破解这个现象呢？

开发者工具Ctrl+F8可以禁用断点调试。