美文网首页前端之路
前端手机端调试

前端手机端调试

作者: 李不远 | 来源:发表于2018-10-20 22:10 被阅读3次

    当前端在进行手机端调试的时候,遇到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://www.haomeiwen.com/subject/nycvzftx.html