在手机网页上模拟 js 控制台

在手机上模拟 console  做一些简单代码调试

在工作机上编辑好代码用QQ 之类的工具传到 手机上在调试
当然你也可以尝试用一只手指写代码的壮举
设置 window.console = mobiDebug 可以在手机上显示控制台信息

/****
mobiDebuggerHelper.js
by cnblogs.com/ecalf
*****/
var mobiDebug = {
    init:function(lauch){
        var holder = document.createElement('div');
        var toolbar = document.createElement('div');
        var content = document.createElement('div');
        var editor = document.createElement('div');
        var board = document.createElement('div');
        
        var textarea = document.createElement('textarea');

        holder.appendChild(toolbar);
        holder.appendChild(content);
        content.appendChild(editor);
        content.appendChild(board);    
        editor.appendChild(textarea);

        holder.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:black;padding:30px 5px;display:none;font-size:14px;font-family:"Courier New";text-align:left;';
        toolbar.style.cssText = 'position:absolute;top:0;height:30px;text-align:right;line-height:30px;';
        toolbar.innerHTML = '<button id="btnDebugClose">关闭</button><button id="btnDebugReload">刷新</button><button id="btnDebugClear">清除</button><button id="btnDebugInput">编辑</button><button id="btnDebugSubmit">执行</button>';
        content.style.cssText = 'position:absolute;line-height:150%;top:30px;left:0;bottom:5px;right:0;background:white;color:black;';
        board.style.cssText = 'position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;display:none;';
        textarea.style.cssText = 'position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;';
        
        document.body.appendChild(holder);
        this.holder = holder;
        this.editor = editor;
        this.board = board;

        var host = this;
        var count = 0,timer=0;
        
        //启动调试
        if(!lauch){
            lauch = document.body;
        }else if(typeof(lauch)=='string'){
            lauch = document.getElementById(lauch);
        }
        
        lauch.onclick = function(){
            if(host.holder.style.display!='none'){ return;}
            
            if(!timer){
                timer = setTimeout(function(){
                    count = 0;
                },5000);
            }            

            count+=1;

            if(count==4){
                host.show();
                count = 0;
                clearTimeout(timer);
            }
        };

        document.querySelector('#btnDebugClose').onclick = function(){
            host.show(false);
        };
        document.querySelector('#btnDebugReload').onclick = function(){
            location.reload();
        };
        document.querySelector('#btnDebugInput').onclick = function(){
            host.showEditor();
        };
        document.querySelector('#btnDebugSubmit').onclick = function(){
            host.test();
        };
        document.querySelector('#btnDebugClear').onclick = function(){
            if(host.editor.style.display!='none'){
                textarea.value='';
            }else{
                host.board.innerHTML='';
            }
        };
        

        return this;
    },    
    show:function(frag){
        this.holder.style.display=frag===false?'none':'block';

        return this;
    },
    showEditor:function(frag){
        this.editor.style.display=frag===false?'none':'block';
        this.board.style.display=frag===false?'block':'none';        
        return this;
    },
    showLog:function(frag){
        this.board.style.display=frag===false?'none':'block';
        this.editor.style.display = frag===false?'block':'none';
        return this;
    },
    log:function(){// var mobiConsole = this; mobiConsole.log('hello world','color:red'); the scope this is mobiConsole,not window 
        var p = document.createElement('p');
        var args = arguments;
        var color = args[args.length-1];
        if((/^colou?r:/i).test(color)){
            p.style.color = color.split(':')[1];
            args = [].slice.apply(args,[0,-1]);
        }else{
            args = [].slice.apply(args,[0]);
        }

        var s = args.join(' ').replace(/[<>]/g,function(s){ return '&#'+s.charCodeAt(0);});
        
        p.innerHTML = s;
        this.board.appendChild(p);
        return this;
    },
    getCode:function(){
        var code = this.editor.querySelector('textarea').value;
        return new Function(code);
    },
    test:function(){
        var fun = this.getCode();
        fun.call(this);
        this.showEditor(false).showLog();
        return this;
    }

};


use like this...

mobiDebug.init($(".header .menu").get(0));

 

转载于:https://www.cnblogs.com/ecalf/p/4160782.html