前端手机端调试

当前端在进行手机端调试的时候，遇到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>
   复制代码

转载于:https://juejin.im/post/5bcb38b5e51d450e9c55e2a2