閒暇時所做的一個將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");
        	}
        }
        }

請多指教。

後記：
2018/09/30：獲取console內容的部分可以通過獲取arguments來實現。