移動開發中Fiddler的那些事兒 (轉)

標籤：

 

當我以前在調PC端網頁的時候，Firefox有Firebug，Chrom也有自己的調試抓包工具，用起來很方便。

但是現在我要在手機上面調試頁面，這個時候就沒有這麼方便的現成工具了。

後面發現了Fiddler，設定一下後，就能用這個來抓取手機訪問頁面時候的請求了。

下面是文章大綱：

1. Fiddler配置與手機無線配置
2. HOST修改
3. AutoResponder
4. 指令
5. 過濾Filter
6. 外掛程式

 

一、Fiddler配置與手機無線配置

1、首先電腦和手機要使用同一個無線

　　      

 

2、配置Fiddler，單機Tools=》Fiddler Options

　　

 

3、配置手機無線，My Phone是Android機，IOS也是差不多的，就是加個代理和連接埠，主機名稱就是你電腦的IP地址，自己用ipconfig看下就有了。

　　改好後，要重新串連一下，才能讓Fiddler抓取到。

　　

 

二、HOST修改

我一開始調試手機網頁，都是先把檔案上傳到綁網域名稱的伺服器上，然後再訪問測試，這樣效率有點低。

以前的PC網頁都是在本地調試好後上傳到伺服器上的，現在我也想這麼做，這個時候就需要在Fiddler中佈建網域名轉向了。

1、例如用手機訪問http://www.pwstrick.com/fiddler/這個頁面：

　　

Fiddler抓取到的如下所示：

　　

 

2、接下來我要讓http://www.pwstrick.com/fiddler/訪問的是我本中的工程檔案。

點擊Tools=》HOSTS開啟的頁面如下：

　　

 

滿心歡喜的以為網域名稱已經轉向了，用瀏覽器開啟，duang一下是下面那個鳥樣：

　　

 

後面我想到得在我本地Apache上面配置個虛擬目錄：

　　

重新整理下頁面：彈出的內容就變成本地設定的了

　　

現在訪問pwstrick地址的HOSTIP就變成了127.0.0.1了

　　

 

三、AutoResponder

剛上面的host修改，是把所有這個網域名稱下的檔案都重新導向。但有的時候只需要測試某個檔案，這個時候就可以用AutoResponder了。

1、將第一個和第二個打勾，第二個不打勾的話，所有頁面就都不能訪問啦，第二個選項的意思是不匹配的請求都保持不變。

　　

 

2、在下面做個匹配規則，我選的是完全符合，這裡可以用Regex，高大上的東西。

　　

　　

 

3、滿懷期待的重新整理下頁面，出來了用的是demo2.js檔案中的內容

　　

 

點擊進入fiddler文檔頁面查看更多規則案例...

 

這個請求還可以讓他延時請求，或者其他方式，選項如下：

　　

 

四、指令

在軟體的底部有個打指令的地方，目前我用的最多的就cls，就是清螢幕，其他指令還不怎麼用，我比較low，囧。點擊查看fiddler官方文檔。

　　

剛查看文檔，發現幾個未來應該會用到的指令，這裡做個小記錄

 

?sometext

　　

　　

輸入?pwstrick然後直接按斷行符號就會看到搜尋URL中包含pwstrick的地址。

 

=status

=method

選擇響應狀態=status （200、404等）或要求方法=method的會話（POST、GET等）

 

@host

選擇會話中網域名稱包含host的會話，此時按Enter鍵可高亮所有匹配的結果

將會把api.pwstrick.com、www.pwstrick.com等URL選中

　　

 

!dns hostname

進行目標網域名稱的DNS尋找，並將結果顯示在LOG選項卡上

　　

　　

 

五、過濾Filter

　　

選項好多，這裡我打算把pwstrick.com給過濾出來，然後就把那個選項打勾

接著點擊Actions中的Run Filterset Now，不過濾請求的話，太多眼都看花了，隨便訪問個線上網站就有幾十個請求，唰唰下來

　　

 

六、外掛程式

1、JavaScript Formatter

將壓縮過的JavaScript指令碼格式化，查看別人網站時候的壓縮指令碼時候用很給力

首先得要先下載這個外掛程式然後安裝，點擊頁面搜尋到JavaScript Formatter，點擊下載。

安裝好後重啟Fiddler，接下來郵件那個URL就會看到中的紅色框選項，點擊一下。

　　

接下來就能看到好看的JavaScript指令碼了，不過不足的是不是彩色的，沒有高亮。這個時候可以藉助另外一個外掛程式配合一下，那就是Syntax-Highlighting Add-Ons，也是在官網的外掛程式頁面搜尋標題下載，下載完後就會多個SyntaxView選項，中的是我已經下載好了的畫面，並且Syntax-Highlighting Add-Ons這個外掛程式還可以做些其他功能具體可以查看文檔。

　　       

 

2、Gallery

這是看圖片的一個外掛程式，沒有這個外掛程式的話我還得複製URL，然後在瀏覽器中輸入看圖片。

我抓取了花瓣網的頁面做示範：我先做了個網域名稱過濾，旁邊的Gallery一欄就會自動出來圖片。

　　

　　

 

 

參考資料：

http://www.6san.com/789/  Fiddler過濾指定網域名稱

http://tid.tenpay.com/?p=3011  前端開發利器—FIDDLER

http://ju.outofmemory.cn/entry/148593  使用前端開發利器Fiddler調試手機程式

http://www.cnblogs.com/mcho/p/3983066.html  Fiddler (六) 最常用的快速鍵

http://my.oschina.net/leejun2005/blog/151103  關於 WEB/HTTP 調試利器 Fiddler 的一些技巧分享

 

 

http://www.cnblogs.com/strick/p/4570006.html

 

移動開發中Fiddler的那些事兒 (轉)