又一個強大的 Web Debug 工具:Fiddler

不可避免的,測試案例一定會包含一些錯誤處理的部分。如果我們只想測試特定連線失敗,但其他連線正常的狀況,就不是像測網路斷線那麼簡單,把網路關掉就可以搞定。

Fiddler 也是一個頗負盛名的 Web Debug 工具,免費、功能強大,因為是用 .Net 實作的關係,程式本身只有 Windows 版本,但其他平台、手機,也可以利用 proxy 連線的方式,使用 Fiddler 強大的除錯功能。

官網上面已經有非常清楚的教學影片,你可以很快知道怎麼安裝 Fiddler、使用它監視你的所有連線、查看任一連線的細節,以及設定中斷點。下面我拿 Youtube 網站當例子,來示範怎麼修改某一個特定連線的結果。

首先打開 Fiddler,並且用瀏覽器打開 Youtube 官網,你可以在左邊視窗看到所有的連線。

show all requests

我們想修改 Youtube 官網左上方 logo 圖檔,那就要先取得這個圖檔的 url:http://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif,並且利用搜尋功能 (Ctrl+F) 找出它,Fiddler 會幫你標上明顯的黃色。

search 2

再來,把這個連線拖曳到右邊的 AutoResponder,下方就會自動產生一個 rule,最底下回應的部分請選擇「bpu」,「bpu」指的是在這個連線設定中斷點。

generate rule

記得上方的「Enable automatic responses」、「Unmatched requests passthrough」都要打勾,然後在瀏覽器重新讀取 Youtube 首頁,這時 logo 圖檔這個連線會顯示一個特別的中斷圖示,雙鍵點擊這個連線後,右邊視窗就會切換到「Inspectors」,可以讓你指定回應值。

choose response

回應值選定「200_FiddlerGif.dat」,然後點擊「Run to Completion」,你會發現 Youtube 的 logo 被惡搞成其他的圖片了!

final

經過這個練習,我們大致了解怎麼利用 Fiddler 控制各個連線的回應值,enjoy it!

參考網址

Fiddler

廣告

One thought on “又一個強大的 Web Debug 工具:Fiddler

發表迴響

Please log in using one of these methods to post your comment:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s