教你如何在移動端除錯WEB頁面
關於頁面除錯，想必作為前端工程師來說是在常見不過的了。很多除錯工具和方法大家也都耳熟能詳，比如Chrome開發者工具，firebug，等等。但是現在的應用場景，大多數都已經從PC端轉向了移動端，而真機實測部分出現錯誤，我們如何除錯呢？下面給大家介紹三種方式，幫你輕鬆搞定移動端的頁面除錯。
1.BrowserSync
BrowserSync是一款前端開發的除錯神器，不但可以實現邊改邊看的功能，而且可以多端同步預覽，也就是說你在手機、Pad等移動裝置上操作的時候，全部操作都會PC端同步顯示，從而達到除錯移動端裝置的目的。
注意：通過BrowserSync除錯工具需要PC和手機在同一區域網內。
比如下圖：
我在本地啟動了一個埠為8888的server，通過BrowserSync開啟代理模式，這時可以看到PC端被對映到了3000埠，而移動端可以通過IP + 埠的形式訪問。之後你在移動端或者PC端的操作，就會實時同步過去啦。
2.Chrome開發者工具
第二種方式就是使用Chrome自帶的開發者工具來進行移動裝置的真機除錯了，並且此種方式不需要在移動裝置上安裝任何軟體。
首先需要我們開啟chrome開發者工具，點選右側... => Mroe tools => Remote devices，開啟如下介面：
接下來我們需要把手機跟電腦用資料線相連。如果提示請求許可權，請點選允許。如果連線成功，則左側會出現手機資訊。（小呆用的公司測試機 華為Mate 9，但是顯示的是個什麼鬼….）
之後點選左側手機名，然後用手機開啟頁面，就會在右側空白處出現頁面連結，點選連結右側的inspect，會彈出一個視窗, 之後就可以像PC一樣去除錯啦。（華為Mate 9 測試未成功，同事的小米和魅族親測可用）
注意：IOS暫不支援此功能，但據說Safari也有此項功能，有Mac的童鞋可以去發掘下
3.Eruda
第三種方式是使用第三方JS外掛，在移動端頁面中新增各種Debug資訊和Error資訊，這裡推薦Eruda。使用方法很簡單：
npm安裝
- npm install eruda --save
引入JS或者CND
- <scriptsrc="node_modules/eruda/eruda.min.js"></script>
- <script>eruda.init();</script>
- <scriptsrc="//cdn.jsdelivr.net/npm/eruda"></script>
- <script>eruda.init();</script>
其他更多關於Eruda的詳細使用方法，請移步GitHub。
好了，到這裡小呆比較常用的移動端除錯工具就介紹完啦，快去試試吧~