JS禁止web页面调试

前言

由于前端在页面渲染的过程中 会调用很多后端的接口，而有些接口是不希望别人看到的，所以前端调用后端接口的行为动作就需要做一个隐藏。

禁用右键菜单

document.oncontextmenu = function() {console.log("禁用右键菜单");return false;
};

禁用F12

 document.onkeydown = document.onkeyup = document.onkeypress = function(event) {let e = event || window.event || arguments.callee.caller.arguments[0];if (e && e.keyCode == 123) {e.returnValue = false;return false;}
};

禁用开发者工具

实际开发中有多少实现方案，这里我们使用的是 无限debugger

大概实现思路：

因为 debugger; 打断点代码 只有在 控制台被打开的时候 才会执行。
所以 写一个无限debugger， 当控制台被打开时，程序被 debugger 阻止，
故而 网页的请求也是看不到的，也 无法进行 手打断点调试。

基础版

(() => {function ban() {setInterval(() => {debugger;}, 50);}try {ban();} catch (err) { }
})();

增强版

Function 构造器生成的 debugger 会在每一次执行时开启一个 临时 js 文件。

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

终极版

1、提升 增强版 的写法

将 Function('debugger')();改写为：
(function () {return false;
}
['constructor']('debugger')
['call']());

2、在 增强版 的基础上 加上 DOM尺寸判断，进而 检测 控制台是否被打开

(() => {function block() {// 控制台的 高度 或者 宽度 大于 200px时 则 满足条件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) { }
})();

说句题外话：
写到这 突然想到一句对于程序员来说很搞笑的话： 一个Bug是Bug， 一堆Bug能work。

当然，我们的目标就是消灭每一个Bug！！！加油