防止恶意调试控制台

身为前端人员，查看控制台已经是一个日常操作，项目除了什么问题第一反应就是打开控制台一探究竟。

直到昨天，负责手头项目的产品突然跟我说使用使用遮罩层遮住部分页面上面的假数据方案不通过，他会用检查元素来吧遮罩层隐藏来看里层的数据（里层也是假数据），并表示这样的假数据会误导用户以为时真数据… 现在的用户都这么厉害了吗——也不知道是不是在抖音上面学的

维护开发人员的“尊严”，防止恶意调试控制台势在必行

说维护尊严可能有点过头了，言归正转。

debugger 防止调试，第一想到就就是debugger，打开控制台就指定断点。但是，高级一点的用户（或者说时同行）可以将控制台断点跳过所以简单一行debugger是不能达到我想要的目的

于是，有了下面的简单实现方法

上代码：

(() => {function block() {setInterval(() => {Function("debugger")();}, 50);}try {block();} catch (err) {}})();

代码里面的妙处简单有3点：定时执行防止跳过，使用Function对象的函数来执行断点，使用自执行函数并用try...catch包裹

上面的方法确实可以比较有效控制恶意调试，但是不太友好。容易惹恼调试者。

所以使用下面这个方法给他一个温馨提示：

(() => {function block() {if (window.outerHeight - window.innerHeight > 200 ||window.outerWidth - window.innerWidth > 200) {document.body.innerHTML ="不要乱翻别人的东西哦";}setInterval(() => {(function () {return false;}["constructor"]("debugger")["call"]());}, 50);}try {block();} catch (err) {}})();

上面主要用到window对象的一些自带属性，到打开控制台且控制台宽度或者高度超过200像素点的时候，页面内容就会被替换。

但是如果是悬浮控制台呢，那就放你一马吧，看来是同行，你看看吧，有问题烦请指教

以上内容为个人学习积累总结，如有疑问烦请指出 _