监听浏览器的控制台(开发者工具)是否打开

原理

利用console打印日志的异步策略。

当使用console打印对象的时候(RegExp/Date/Array/Dom),输出的是引用,也就是说,显示到控制台上的是最新的值,而不是执行输出那一刻的值。如下图:
在这里插入图片描述
即,每次显示的时候,都会重新获取信息。

var ConsoleManager={
    onOpen(){
        alert("Console is opened")
    },
    onClose(){
        alert("Console is closed")
    },
    init(){
        var self = this;
        var x = document.createElement('div');
        var isOpening = false,isOpened=false;
        Object.defineProperty(x, 'id', {
            get(){
                if(!isOpening){
                    self.onOpen();
                    isOpening=true;
                }
                isOpened=true;
            }
        });
        setInterval(function(){
            isOpened=false;
            console.info(x);
            console.clear();
            if(!isOpened && isOpening){
                self.onClose();
                isOpening=false;
            }
        },200)
    }
}

ConsoleManager.onOpen = function(){
    alert("Console is opened!!!!!")
}
ConsoleManager.onClose = function(){
    alert("Console is closed!!!!!")
}
ConsoleManager.init();

你可能感兴趣的:(Web)