移動開發中Fiddler的那些事兒

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

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

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

下面是文章大綱：

1. Fiddler配置與手機無線的配置
2. HOST修改
3. AutoResponder
4. 指令
5. 過濾Filter
6. 插件

 

1、Fiddler配置與手機無線的配置

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

　　      

 

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

　　

 

三、配置手機無線，個人手機是Android機，IOS也是差很少的，就是加個代理和端口，主機名就是你電腦的IP地址，本身用ipconfig看下就有了。

　　改好後，要從新鏈接一下，才能讓Fiddler抓取到。

　　

 

2、HOST修改

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

之前的PC網頁都是在本地調試好後上傳到服務器上的，如今我也想這麼作，這個時候就須要在Fiddler中配置域名轉向了。

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

　　

Fiddler抓取到的以下所示：

　　

 

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

點擊Tools=》HOSTS打開的頁面以下：

　　

 

滿心歡喜的覺得域名已經轉向了，用瀏覽器打開，duang一下是下面那個鳥樣：

　　

 

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

　　

刷新下頁面：彈出的內容就變成本地設置的了

　　

如今訪問pwstrick地址的HOSTIP就變成了127.0.0.1了

　　

 

3、AutoResponder

剛上面的host修改，是把全部這個域名下的文件都重定向。但有的時候只須要測試某個文件，這個時候就能夠用AutoResponder了。

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

　　

 

二、在下面作個匹配規則，我選的是徹底匹配，這裏能夠用正則表達式，高大上的東西。

　　

　　

 

三、滿懷期待的刷新下頁面，出來了用的是demo2.js文件中的內容

　　

 

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

 

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

　　

 

4、指令

在軟件的底部有個打指令的地方，目前我用的最多的就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選項卡上

　　

　　

 

5、過濾Filter

1）過濾域名

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

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

　　

 

2）自定義請求頭或響應頭屬性

Set request header與Set response header，設置自定義請求頭與響應頭。能夠模擬跨域等問題。

座標的是不肥請求頭，右邊是部分響應頭，Origin與Access-Control-Allow-Origin對應了起來，必須如出一轍，少個「http」都不行。

 

 

6、插件

一、JavaScript Formatter

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

首先得要先下載這個插件而後安裝，點擊頁面搜索到JavaScript Formatter，點擊下載。

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

　　

接下來就能看到好看的JavaScript腳本了，不過不足的是否是彩色的，沒有高亮。這個時候能夠藉助另一個插件配合一下，那就是Syntax-Highlighting Add-Ons，也是在官網的插件頁面搜索標題下載，下載完後就會多個SyntaxView選項，下圖中的截圖是我已經下載好了的畫面，而且Syntax-Highlighting Add-Ons這個插件還能夠作些其餘功能具體能夠查看文檔。

　　       

 

二、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 的一些技巧分享

Fiddler中文文檔