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

大家都知道 [Fiddler](http://www.fiddler2.com/) 可以用來做 HTTP 追蹤/除錯，尤其是對 JavaScript/AJAX/XHR 使用頻繁的今天更是必備的工具之一，除了可以抓取所有 HTTP 的封包外，Fiddler 還可以用來修改透過 HTTP 傳回來的網頁內容(HTML)、JavaScript 檔(\*.js)、CSS 檔(\*.css) 或任何圖檔，都可以透過自訂的 Fiddler Script 或 Extension Plugins 進行修正後再傳回到瀏覽器中，這對於已經上線的網站來說，十分的適合用來測試 HTML/CSS/JS 修改過後的顯示結果。

例如說 [Fiddler Extensions](http://www.fiddler2.com/fiddler2/extensions.asp) 中就有個 [Image-Flipper (sample)](http://www.fiddler2.com/dl/AustralianImages.zip) 可下載，他會將所有從 HTTP 傳回的圖片全部都進行翻轉動作，安裝好之後假設我連到 [MSN 台灣首頁](https://www.msn.com/zh-tw)，就會看到所有圖片都 180 度翻轉了，雖是個沒什麼用的 Sample，但卻可以展示 Fiddler 擴充的彈性。

[![MSN 台灣首頁](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/37d4cebfb7890704df64-image_thumb_2.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/83afe65a0bc51431c184-image_7.png) 

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

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

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

![Fiddler - HTTP Debugging Proxy](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3d2402e825ff69056fb7-image_3.png)

開啟後畫面如下：

[![Fiddler2 ScriptEditor](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/98937d5299926f71256d-image_thumb_1.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ad06e7ed1e8972fdac4e-image_5.png)

然後找到 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](http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp) 還有許多範例可看，不過上面的範例對 Encoding 的處理都有問題，建議用我的範例程式進行網頁的讀取與回應，回應的網頁比較不會出現亂碼。

**相關連結**

-   [Fiddler2](http://www.fiddler2.com/)
-   [Fiddler - Extensions](http://www.fiddler2.com/Fiddler2/extensions.asp)
-   [Using FiddlerScript](http://www.fiddler2.com/Fiddler/dev/)
-   [FiddlerScript CookBook](http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp)
-   [Using Regular Expressions with JavaScript and ActionScript](http://www.regular-expressions.info/javascript.html)