前端手机端调试

当前端在进行手机端调试的时候，遇到bug，但却不能一眼看出什么问题的时候，手机端又没有控制台，该如何解决呢？

下面是在手机端进行调试的三个方法

alert方法

window.onerror = function(message,file,row,column){
    alert(message) //错误信息
    alert(file) //错误所在文件
    alert(row) //错误所在行数
    alert(column) //错误所在列数（不靠谱）
}

自建控制台

html部分

<div id="consoleOutput" style="position:fixed;width:100%;left:0;bottom:0;height:100px;border:1px solid red;background:white;overflow:auto">
</div>

javascript部分

window.console={
    log(x){
        let p = document.createElement('p')
        p.innerText = x
        consoleOutput.appendChild(p)
    }
}
console.log('hi')
window.onerror = function(message,file,row,column){
    console.log(message) //错误信息
    console.log(file)   //错误所在文件
    console.log(row) //错误所在行数
    console.log(column) //错误所在列数（不靠谱）
}

使用第三方库

vConsole

使用方法

1. npm安装

   npm install vconsole
   

2. 引入到项目，并初始化

   <script src="path/to/vconsole.min.js"></script>
   <script>
     // init vConsole
     var vConsole = new VConsole();
     console.log('Hello world');
   </script>