Simulating the JS console on a mobile Web page

Simulate the console on your phone to do some simple code debugging

Edit the code on the work machine with the tools of QQ and so on to the phone on the debugging
Of course, you can also try a feat of writing code with one finger.

/****mobidebuggerhelper.jsby cnblogs.com/ecalf*****/varMobidebug ={init:function(lauch) {varHolder = document.createelement (' div '); vartoolbar = document.createelement (' div '); varContent = document.createelement (' div '); varEditor = document.createelement (' div '); varboard = document.createelement (' div '); vartextarea = 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 ' > Close </button><button id= ' btndebugreload ' > Refresh </button>< Button id= "Btndebugclear" > Clear </button><button id= "Btndebuginput" > Edit </button><button id= " Btndebugsubmit "> Execution </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; varHost = This; varCount = 0,timer=0; //Start Debugging        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 of this is Mobiconsole,not window        varp = document.createelement (' P '); varargs =arguments; varcolor = 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]); }        vars = Args.join ("). Replace (/[<>]/g,function(s) {return' +s.charcodeat ' (0);}); P.innerhtml=s;  This. Board.appendchild (P); return  This; }, GetCode:function(){        varCode = This. Editor.queryselector (' textarea '). Value; return NewFunction (code); }, Test:function(){        varFun = This. GetCode (); Fun.call ( This);  This. Showeditor (false). Showlog (); return  This; }};


Use the like this ...

Mobidebug.init ($ (". Header. Menu"). Get (0));

Simulating the JS console on a mobile Web page