利用http-server進行手機頁面調試

來自專欄前端知識筆記

1. 將手機連接到PC的同一個網路

命令行 http-server -c-1 開啟本地網頁伺服器，如下：

同wifi下，用手機訪問網址 192的網址，即可進入網頁頁面

2. 進行調試

手機上不能像在網頁上一樣直接使用console.log進行調試，可以尋找替代方案

2.1 alert()調試

先利用alert()確定出錯代碼區域，然後利用alert()結合onerror進行錯誤調試

window.onerror = function(message,file,row) { alert(message) alert(file) alert(row)}

也可以是其他script.onerror

2.2 自己造一個console

由於手機頁面沒有console.log，我們可以自己定義一個console.log

<div id="consoleOutput" stylex="position:fixed;width:100%;left:0;bottom:0;height:100px;border:1px solid black;background:red;overflow: auto;"></div><script> window.console = { log(x) { let p = document.createElement(p) p.innerText = x consoleOutput.appendChild(p) } }</script>

這樣手機上也有調試窗口了，可以像pc上一樣使用console.log進行調試了

window.onerror = function(message,file,row) { console.log(message) console.log(file) console.log(row)}

2.3 現成的方案——騰訊的vConsole

https://github.com/Tencent/vConsole

npm install vconsole

引入即可，這樣我們也可以得到一個模擬控制台

<script src="你的路徑/vconsole.min.js"></script><script> // init vConsole var vConsole = new VConsole(); console.log(Hello world);</script>

推薦閱讀：