谈谈基于JS实现阻止别人调试通过控制台调试网站的问题

前言

大家好哇，今天我们来谈谈浏览器控制台的那点事儿，作为一名程序员来说，肯定是不希望自己的代码被别人反复的调试，万一被别人调试出bug怎么办？被不怀好意的人获取接口信息恶意攻击怎么办？所以，这时候JavaScript防审查开启控制台就很有必要了~

总所周知，要开启控制台，有三种方法，

• F12

• 右键==》检查

• 浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i）

需要注意的是：前两种都是可以通过代码阻止的，但是最后一种打开控制台的方式是无法被阻止掉的。那么下面我们就从这个角度出发，好好理一下这个过程~

阻止打开控制台

能阻止就先阻止，把打开控制台的举动扼杀在摇篮之中~

阻止F12事件

window.onkeydown = window.onkeyup = window.onkeypress = function (event) { 
 // 判断是否按下F12，F12键码为123 
 if (event.keyCode = 123) { 
 event.preventDefault() // 阻止默认事件行为 
 window.event.returnValue = false 
 } 
}


实现效果如下（摁了F12无反应）：

看不出任何效果啊喂！

阻止右键事件

为右键添加自定义事件，可以禁用 

oncontextmenu

 事件在元素中用户右击鼠标时触发并打开上下文菜单。

window.oncontextmenu = function() { 
 event.preventDefault() // 阻止默认事件行为 
 return false 
}


实现效果如下（右键无反应）：

还是看不出任何效果啊喂！

JS操作控制台

虽然阻止了部分能打开控制台的方式，但还是会有漏网之鱼通过

浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i）

 的方式打开控制台，那么我们就需要在打开后的控制台再做点文章了~

定时检查浏览器窗口变化

如果打开了控制台，浏览器窗口就会发生变化，利用这个特点，我们可以做出如下的监听：

let threshold = 160 // 打开控制台的宽或高阈值 
window.setInterval(function() { 
 if (window.outerWidth - window.innerWidth > threshold || 
 window.outerHeight - window.innerHeight > threshold) { 
 // 如果打开控制台，则刷新页面 
 window.location.reload() 
 } 
}, 1000)


实现效果如下（可以看出打开控制台后，页面一直在持续刷新）：

当然，如果用户把控制台改为了悬浮窗口模式，那么这个监听就会无效，并且当用户切换为非全屏的时候，可能也会误触此函数，所以这个方法还是有一点过的缺陷，可以做个补充。

打开控制台弹窗,启用调试debug调试

控制台弹框的debug调试，可能很多人都不太了解，其实是挺简单的功能。

debugger

 语句用于停止执行JS代码，并调用 (如果可用) 调试函数。

使用 

debugger

 语句类似于在代码中设置断点。

我们可以在代码中添加如下代码来实现

debugger

的调试：

第一种debug调试

setInterval(function() {
 check()
}, 1000);
var check = function() {
 function doCheck(a) {
 if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
 (function() {}
 ["constructor"]("debugger")())
 } else {
 (function() {}
 ["constructor"]("debugger")())
 }
 doCheck(++a)
 }
 try {
 doCheck(0)
 } catch (err) {}
};
check();


实现效果如下（可以看出打开控制台后，变成debug模式）：

第二种debug调试

if(window.location.href.indexOf('#debug')==-1){
 setInterval(function(){
 (function (a) {return (function (a) {return (Function('Function(arguments[0]+"' + a + '")()'))})(a)})('bugger')('de', 0, 0, (0, 0))
 }, 1000)
}


实现效果如下（和上一个debug模式相同，可以看出打开控制台后，变成debug模式）：

虽然打开了控制台弹窗debug调试，但控制台终究是开着，还是能查看相关的文件和代码，也能重新在控制台清除debug模式再进行部分调试。那么有没有更好一点的方法呢？

打开控制台提示（可实现跳转url或刷新）

function toDevtools(){

 let num = 0
 var devtools = new Date()
 devtools.toString = function() {
 num++;
 if(num>0){
 alert('控制台打开了')
 // 可以写刷新或者跳转的逻辑
 }
 }
 console.log(devtools);
}
toDevtools()


实现效果如下：

完结撒花！！！

后记

今天分享的内容希望对你有所帮助，通过以上代码可以监听到控制台是否被打开以及后续的逻辑操作，防止别人进行代码调试，在实际应用中的场景还是蛮多的~