大家都知道 Fiddler 可以用來做 HTTP 追蹤/除錯，尤其是對 JavaScript/AJAX/XHR 使用頻繁的今天更是必備的工具之一，除了可以抓取所有 HTTP 的封包外，Fiddler 還可以用來修改透過 HTTP 傳回來的網頁內容(HTML)、JavaScript 檔(*.js)、CSS 檔(*.css) 或任何圖檔，都可以透過自訂的 Fiddler Script 或 Extension Plugins 進行修正後再傳回到瀏覽器中，這對於已經上線的網站來說，十分的適合用來測試 HTML/CSS/JS 修改過後的顯示結果。
例如說 Fiddler Extensions 中就有個 Image-Flipper (sample) 可下載，他會將所有從 HTTP 傳回的圖片全部都進行翻轉動作，安裝好之後假設我連到 MSN 台灣首頁，就會看到所有圖片都 180 度翻轉了，雖是個沒什麼用的 Sample，但卻可以展示 Fiddler 擴充的彈性。
我今天自己嘗試寫了一個簡單的 Fiddler Script 練習看看，將心得紀錄如下：
首先，先安裝好 Fiddler 與 FiddlerScript Editor，有了 FiddlerScript Editor 可以方便你在有 Syntax Highlight 與 Intellisense 的編輯器下撰寫 Fiddler Script。另外提及一點，Fiddler Script 完全是用 JScript 的語法撰寫的，且可以使用所有 .Net 類別，所以對熟悉 JavaScript 與 .Net 的開發人原來說應該算是非常得心應手。
接著開啟 Fiddler 後點選 Rules 選單下的 Customize Rules 開啟編輯器：
開啟後畫面如下：
然後找到 OnBeforeResponse 函數(事件)，在該 function 最後面加上以下程式碼：
if (oSession != null && oSession.oResponse != null && oSession.oResponse.headers != null
&& oSession.responseCode == 200
&& oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html")
)
{
// 必須先將原本的 HTTP Response 資料解碼過
// 因為 HTTP Response Reponse 的資料可能是壓縮過或被分段(chunking)
oSession.utilDecodeResponse();
// 取得原本從 Server 回應的內容編碼 (Encoding) (這裡用的是 System.Text.Encoding 類別)
var enc = Utilities.getResponseBodyEncoding(oSession);
// 取得原本從 Server 回應來的內容
var oBody = enc.GetString(oSession.responseBodyBytes);
// 設定一組 Regular Expression Pattern 用以剔除所有 <font> 標籤
var oRegEx = /<!--(.*?)-->/gi;
// 執行字串取代動作
oBody = oBody.replace(oRegEx, "");
// 將修改過的網頁內容寫回 Session
oSession.responseBodyBytes = enc.GetBytes(oBody);
}這只是一個簡單的範例，你可以透過 RegEx 做更多的網頁內容的搜尋/取代動作。其實在 FiddlerScript CookBook 還有許多範例可看，不過上面的範例對 Encoding 的處理都有問題，建議用我的範例程式進行網頁的讀取與回應，回應的網頁比較不會出現亂碼。
相關連結