前端手機端除錯

當前端在進行手機端除錯的時候，遇到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>
   複製程式碼