调试项目少不了使用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可以了!把以上代码复制到你的项目中,移动端调试的时候就可以使用,大家有需要的试一下吧。