移動開發中Fiddler的那些事兒 一、Fiddler配置與手機無線的配置 二、HOST修改 三、AutoResponder 四、指令 五、過濾Filter 六、插件

當我以前在調pc端網頁的時候，firefox有firebug，chrom也有自己的調試抓包工具，用起來很友善。

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

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

下面是文章大綱：

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#first">fiddler配置與手機無線的配置</a>

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#second">host修改</a>

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#third">autoresponder</a>

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#four">指令</a>

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#five">過濾filter</a>

<a target="_blank" href="http://www.cnblogs.com/strick/p/4570006.html#six">插件</a>

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

　　

2、配置fiddler，單機tools=》fiddler options

3、配置手機無線，我的手機是android機，ios也是差不多的，就是加個代理和端口，主機名就是你電腦的ip位址，自己用ipconfig看下就有了。

　　改好後，要重新連接配接一下，才能讓fiddler抓取到。

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

以前的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了

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

1、将第一個和第二個打勾，第二個不打勾的話，所有頁面就都不能通路啦，第二個選項的意思是不比對的請求都保持不變。

2、在下面做個比對規則，我選的是完全比對，這裡可以用正規表達式，高大上的東西。

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

<a target="_blank" href="http://docs.telerik.com/fiddler/knowledgebase/autoresponder">點選進入fiddler文檔頁面檢視更多規則事例...</a>

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

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

?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頁籤上

1）過濾域名

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

接着點選actions中的run filterset now，不過濾請求的話，太多眼都看花了，随便通路個線上網站就有幾十個請求，唰唰下來

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

set request header與set response header，設定自定義請求頭與響應頭。可以模拟跨域等問題。

坐标的是不肥請求頭，右邊是部分響應頭，origin與access-control-allow-origin對應了起來，必須一模一樣，少個“http”都不行。

1、javascript formatter

将壓縮過的javascript腳本格式化，檢視别人網站時候的壓縮腳本時候用很給力

formatter，點選下載下傳。

安裝好後重新開機fiddler，接下來郵件那個url就會看到下圖中的紅色框選項，點選一下。

add-ons這個插件還可以做些其他功能具體可以檢視文檔。

2、gallery

這是看圖檔的一個插件，沒有這個插件的話我還得複制url，然後在浏覽器中輸入看圖檔。

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

參考資料：

最常用的快捷鍵

調試利器 fiddler 的一些技巧分享