尽管大多数浏览器中内置的DevTools为日常开发和调试带来了巨大便利,但在某些需要保证『安全性』的场合,例如在线考试、在线教育、或是一些行业应用,我们也对DevTools『恨之入骨』:抓包、修改数据、插入恶意代码、查看源码、Debug深入原理……
但其实屏蔽DevTools的方法非常简单,简单到只需要三行代码。

0x01

将以下代码贴在所需页面的<sctipts>标签内:

let obj = new Image();
Object.defineProperty(obj,'id',{get:function(){document.write("禁止使用开发者工具")}});
console.log(obj);

刷新页面,会发现网页功能正常,但当我们通过各种方式(菜单栏、F12、右键)打开DevTools都会发现网页被清空,并显示『禁止使用开发者工具』的字样:

就是这简单的三行代码能够有效阻止用户启动DevTools。

0x02

接下来,我们来解析一下以上三行代码,一探其中的原理。

let obj = new Image();

这部分自然不用多说,新建了一个Image对象,并命名为obj。

Object.defineProperty(obj,'id',{get:function(){document.write("禁止使用开发者工具")}});

根据MDN的文档defineProperty()方法的作用是为对象设置属性/修改属性,在这里我们对上面新建的Image对象中id属性应用了getter方法,即该对象的id属性被访问,其getter方法则会被触发。

console.log(obj);

这行代码输出了obj对象,由于控制台有『输出对象时访问对象属性』的特点,更详细来说是会在输出Image对象时触发其id属性,因此会对上面使用的id属性执行一次访问,即触发其getter方法。

该视频更详细地解释了为什么需要绑定id属性,可以发现就算在弹出智能提示的时候,也会触发一次该属性的getter方法。