The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

透過 Fiddler 快速修改網頁內容用以除錯上線的網站

大家都知道 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 擴充的彈性。

MSN 台灣首頁 

我今天自己嘗試寫了一個簡單的 Fiddler Script 練習看看,將心得紀錄如下:

首先,先安裝好 FiddlerFiddlerScript Editor,有了 FiddlerScript Editor 可以方便你在有 Syntax Highlight 與 Intellisense 的編輯器下撰寫 Fiddler Script。另外提及一點,Fiddler Script 完全是用 JScript 的語法撰寫的,且可以使用所有 .Net 類別,所以對熟悉 JavaScript 與 .Net 的開發人原來說應該算是非常得心應手。

接著開啟 Fiddler 後點選 Rules 選單下的 Customize Rules 開啟編輯器:

Fiddler - HTTP Debugging Proxy

開啟後畫面如下:

Fiddler2 ScriptEditor

然後找到 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 的處理都有問題,建議用我的範例程式進行網頁的讀取與回應,回應的網頁比較不會出現亂碼。

相關連結