项目背景

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

解决办法

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

1、打开控制台，无限debugger

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

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

无限debugger

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

onMounted(() => {// 定时检测开发者工具是否已打开setInterval(checkDevTools, 1000);
})function checkDevTools() {const startTime = performance.now();// 设置断点// eslint-disable-next-line no-debuggerdebugger;const endTime = performance.now();// 设置一个阈值，例如100毫秒if (endTime - startTime > 100) {window.location.href = 'about:blank';}
}

测试

 

破解

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

如何破解这个现象呢？

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