關于頁面調試,想必作為前端工程師來說是在常見不過的了。很多調試工具和方法大家也都耳熟能詳,比如Chrome開發者工具,firebug,等等。但是現在的應用場景,大多數都已經從PC端轉向了移動端,而真機實測部分出現錯誤,我們如何調試呢?下面給大家介紹三種方式,幫你輕松搞定移動端的頁面調試。

1.BrowserSync

BrowserSync是一款前端開發的調試神器,不但可以實現邊改邊看的功能,而且可以多端同步預覽,也就是說你在手機、Pad等移動設備上操作的時候,全部操作都會PC端同步顯示,從而達到調試移動端設備的目的。

注意:通過BrowserSync調試工具需要PC和手機在同一局域網內。

比如下圖:

我在本地啟動了一個端口為8888的server,通過BrowserSync開啟代理模式,這時可以看到PC端被映射到了3000端口,而移動端可以通過IP + 端口的形式訪問。之后你在移動端或者PC端的操作,就會實時同步過去啦。

BrowserSync

更多BrowserSync的用法請查看小呆之前的文章《前端調試神器——BrowserSync》


2.Chrome開發者工具

第二種方式就是使用Chrome自帶的開發者工具來進行移動設備的真機調試了,并且此種方式不需要在移動設備上安裝任何軟件。

首先需要我們打開chrome開發者工具,點擊右側... => Mroe tools => Remote devices,打開如下界面:

Chrome開發者工具

Chrome開發者工具

接下來我們需要把手機跟電腦用數據線相連。如果提示請求權限,請點擊允許。如果連接成功,則左側會出現手機信息。(小呆用的公司測試機 華為Mate 9,但是顯示的是個什么鬼….)

Chrome開發者工具

之后點擊左側手機名,然后用手機打開頁面,就會在右側空白處出現頁面鏈接,點擊鏈接右側的inspect,會彈出一個窗口, 之后就可以像PC一樣去調試啦。(華為Mate 9 測試未成功,同事的小米和魅族親測可用)

注意:IOS暫不支持此功能,但據說Safari也有此項功能,有Mac的童鞋可以去發掘下


3.Eruda

第三種方式是使用第三方JS插件,在移動端頁面中添加各種Debug信息和Error信息,這里推薦Eruda。使用方法很簡單:

npm安裝

npm install eruda --save

引入JS或者CND

<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

Eruda

其他更多關于Eruda的詳細使用方法,請移步GitHub。


好了,到這里小呆比較常用的移動端調試工具就介紹完啦,快去試試吧~