将console.log的内容在页面上输出方便在移动设备上查看

来源:互联网 发布:自己开淘宝店做淘宝客 编辑:程序博客网 时间:2024/05/14 09:51

闲暇时所做的一个将console.log的内容在页面上输出的小玩意。

CSS

        #info{            position: fixed;            right: 0;top: 0;width: 20px;height: 20px;background:rgba(10,10,10,.8);            overflow: scroll;            font-size: 10px;            z-index: 999;            -webkit-tap-highlight-color: transparent;        }        #info h1{            color: green;            word-wrap: break-word;            white-space: pre;        }        #info h1:nth-child(odd){            background-color: rgba(0,0,0,.4);        }

HTML

<div id="info" onClick="show();" type="0"></div>

JS

var infoConsole = document.getElementById('info');        if (infoConsole) {        if (console) {            var _console = {                log:console.log            }            console.log = function(attr){                _console.log(attr);                var str = JSON.stringify(attr, null, 4);                var node = document.createElement("H1");                var textnode = document.createTextNode(str);                node.appendChild(textnode);                infoConsole.appendChild(node);            }        }        function show(){            var type = infoConsole.getAttribute("type");            if (type === "0") {                infoConsole.style.cssText  = "width:100vw;height:40vh;";                infoConsole.setAttribute("type","1");            }else{                infoConsole.removeAttribute('style');                infoConsole.setAttribute("type","0");            }        }        }

请多指教。