手机端调试技巧-优快云博客

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

使用方法

npm安装
```
npm install vconsole
复制代码
```

引入到项目，并初始化

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