关于移动端显示console.log日志的写法

调试项目少不了使用console.log()和alert()这种基本的方法，pc端直接可以看到，但是在移动端却只能用alert()查看一下需要显示的信息，接下来我要介绍一下怎么在移动端显示console.log()，可以帮助大家方便的调试。

为了方便大家使用我就直接列代码，大家复制过去就可以直接使用，保证没有一点瑕疵。

 

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");
        }
    }
}

 

html中插入以下代码：

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

 

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);
}

 

ok可以了！把以上代码复制到你的项目中，移动端调试的时候就可以使用，大家有需要的试一下吧。