前端开发中如何在JS文件中检测用户浏览器是否打开了调试面板
·
一、根据浏览器窗口大小变化
var widthThreshold = window.outerWidth - window.innerWidth > threshold;
var heightThreshold = window.outerHeight - window.innerHeight > threshold;
var orientation = widthThreshold ? 'vertical' : 'horizontal';
二、从输出时间来判断
function isConsoleOpen() {
var startTime = new Date();
debugger;
var endTime = new Date();
return endTime - startTime > 100;
}
如果控制台打开,debugger这里会使其执行中断
三、使用浏览器输出对象时获取实时引用的方式
举个例子来说明chrome获取对象实时的例子吧。(控制台会保留console的内容)

我们在利用控制台查看对象,点击后展开的对象属性是实时的。假如对象在输出后又有改动,最好使用JSON.stringify去输出 。
四、通过设置对象的属性的getter方法
原理:当控制台在输出的某个对象时,是会去get对象属性的,因此会调用到属性的getter。
var checkStatus;
var element = new Image();
// var element = document.createElement('any');
element.__defineGetter__('id', function() {
checkStatus = 'on';
});
setInterval(function() {
checkStatus = 'off';
console.log(element);
console.clear();
document.querySelector('#devtool-status').innerHTML = checkStatus;
}, 1000)
五、奇淫巧技
(function () {
var re = /x/;
var i = 0;
console.log(re);
re.toString = function () {
return '第 ' + (++i) + ' 次打开控制台';
};
})();
实例:
((function() {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function(fn) {
callbacks.push(fn);
},
cancleListenr: function(fn) {
callbacks = callbacks.filter(function(v) {
return v !== fn;
});
}
}
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function(fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('请尊重一下劳动成果,不要偷代码哦!');
document.body.innerHTML = "";
} else {
open = false;
}
}
})()).addListener(function() {
window.location.reload();
});
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)