移動端web開發之真機調試工具的使用

在web開發開發過程當中調試時必不可少的，這篇文章就講一下移動端web的調試。

經常使用的有兩種方式：1.直接在瀏覽器自帶的移動端模擬環境上調試。2.使用Fildder抓包工具進行手機真機調試。

瀏覽器調試

谷歌的開發者工具爲移動端調試作了專門的準備：打開開發者工具，點擊第二個手機狀圖片

便可進入手機模式瀏覽全部網頁：

在這裏能夠選擇所須要的手機類型

而後就能夠進行相應的調試了，但這個畢竟是模擬環境，跟真機調試相比仍是會有些許差異。我我的的話，若是隻是大體看下web效果會使用這個，党進行嚴格的開發的時候就要使用Fiddler（下面講使用方法）抓包進行真機調試了。

Fiddler抓包工具

 

這裏所說的移動端抓包不是說經過瀏覽器的開發工具查看http請求，而是經過Fiddler代理抓取真機請求的http包。

 

Fiddler是一款很是流行而且實用的http抓包工具，它的原理是在本機開啓了一個http的代理服務器，而後它會轉發全部的http請求和響應，所以，它比通常的firebug或者是chrome自帶的抓包工具要好用的多。不只如此，它還能夠支持文件替換、請求重放等一些高級功能。顯然它是能夠支持對手機應用進行http抓包的。

既然是代理，也就是說：客戶端的全部請求都要先通過Fiddler，而後轉發到相應的服務器，反之，服務器端的全部響應，也都會先通過Fiddler而後發送到客戶端：

 

介紹下如何用fiddler對手機應用來抓包。

首先去fiddle官網下載最新版本並點擊fiddler.exe進行安裝

安裝成功後，此爲運行界面

主面板左側：

是http包列表，是Fiddler抓取到的每條http請求（每一條稱爲一個session）,主要包含了請求的url，協議，狀態碼，body等信息，詳細的字段含義以下圖所示：

主面板右側：詳情和數據統計面板。針對每條http請求的具體統計（例如發送/接受字節數，發送/接收時間，還有粗略統計世界各地訪問該服務器所花費的時間）和數據包分析。

其餘的具體功能有興趣的能夠參照fiddle教程進行了解：http://kb.cnblogs.com/page/130367/

下面講一下真機抓包：

 

這裏將介紹如何使用fillder抓取手機請求包。不過經過fillder代理抓取手機包有個必備條件，就是電腦網絡和手機網絡是互通的，不然將沒法抓包。檢測PC是否能夠訪問到手機，能夠直接ping 手機ip。

第一步：檢測fillder設置

在抓包以前須要確保fillder的一些設置是正確的：

頂部導航欄——Tools——Fillder Options

確保紅色框中的選項被勾選（容許電腦被鏈接訪問），上方的端口號設置爲8888！（一會手機設置會用到）
      

第二步：獲取本機 ip地址：能夠在cmd裏面輸入ipconfig命令獲取

第三步：手機代理設置

打開手機設置——wifi——並找到http代理選項，設置爲手動並輸入服務器名（既本身的電腦的IP），端口（fiddle裏本身設置的端口號）

                                      

設置完這些後在本身手機端的瀏覽器上打開本身開發的網頁了，並進行調試。