本文主要是介绍Vue3 - 前端项目代码防止被调试/被爬，阻止浏览器F12开发者工具，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目背景
大家都知道浏览器的开发者工具能干啥，正经的用法：开发时调试代码逻辑，修改布局样式；不正经的用法：改改元素骗骗人，找找网站接口写爬虫，逆向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可以禁用断点调试。
这篇关于Vue3 - 前端项目代码防止被调试/被爬，阻止浏览器F12开发者工具的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
