前端如何禁止用户调试你的页面?

645 阅读2分钟

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

注意:生产模式 才需要禁止调试!!!

我先用代码模拟生产模式

image-3.png

定时器 + debugger

当你打开调试面板的时候,代码里的 debugger 断点会进行执行,阻塞你的代码执行

当使用 定时器 + debugger 会让调试者一直跳不出断点,从而起到禁止调试代码的作用

注意:生产模式 才加入这段代码!!!

image-1.png

image.png

破解方法 + 应对方法

但是这种方式是能破解的

方法一:Activate breakpoints

image.png

但是如果这样的话,那么调试者无意是饮鸩止渴,因为你都把调试关了,那你还怎么调试呢?

方法二:Add logpoint

image.png

对于这个方式的话,其实也好解决,只需要通过打包工具代码压缩,把代码都放在一行即可

image.png

image.png

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点