使用Fiddler提高前端工作效率 (實例篇)

在上一篇（介紹篇）中，我們對FidHTTP://www.aliyun.com/zixun/aggregation/16504.html">dler Web Debugger有了簡單的接觸， 也許你已經開始在用Fiddler進行HTTP相關的調試，在這一篇，我們將通過一個實例瞭解Fiddler的神奇魔法。

在我們前端開發的日常工作中，發現伺服器上某個css/javascript檔有問題，需要修改，那真是家常便飯。 通常，我們需要將檔進行修改，然後重新發佈再驗證，這樣就很容易影響到生產環境的穩定性。 更普遍的做法是，我們在開發環境中修改檔並驗證，然後發佈到生產環境。 雖然安全，卻比較繁瑣。 而利用Fiddler的可以修改HTTP資料的特性，我們就非常敏捷地基於生產環境「修改——驗證——發佈」。

假設我們發現這個頁面有問題，需要修改所引用的js檔（HTTP://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102）。

tip: 最好是沒有緩存的返回內容（Result Code是200），這樣可以進行下一步的保存。 不是200也沒關係，你只要本地硬碟上有這個檔就好了。

在這個js session上右鍵點擊，選擇「Save – Response –Response Body...」，將js檔的內容保存到本地。 記住存的位置，下面我們會用到這個保存下來的檔。

打開AutoResponder標籤設置。 有沒有看到介面上有兩個核取方塊？ 第一個的作用是開啟或禁用自動重定向功能，我們就可以在下面添加重定向規則了。 第二個核取方塊框勾上時，不影響那些沒滿足我們處理條件的請求。

我們可以通過「Add...」按鈕手動添加規則，不過這個URL已經出現在我們的session清單中，可以直接拖動過來。 在左側的Session清單中選擇第一步找到的session，拖動到AutoResponse標籤中。 這樣就創建了一個針對這個URL的規則。

Fiddler幫我們生成的規則是：

我們需要修改這個規則，

選擇「Find a file...」，就可以選擇本地的檔作為返回的body內容。

選擇我們剛剛保存下來的檔。

刷新一下瀏覽器頁面，看一下session清單，如果像下面這樣，這個session的底色是灰色的，那麼恭喜你，你已經成功將這個請求重定向到本地檔了！

tip: 如果瀏覽器用的是Firefox，記得先清一下暫存檔案緩存，因為Firefox是真正的緩存，當判斷檔的緩存還未過期時，就不會再發請求出來，Fiddler就獲取不到了。

我們在本地的js檔中加一句alert(‘hello’)

刷新瀏覽器，看看效果，如果alert出來，那就成功了。

繼續修改這個檔並測試，成功修復問題後，我們就可以發佈修改後的檔了。

小結：自動重定向功能是Fiddler最實用的功能，這裡的Rule可以自由地設定，可以使用搜索（預設）、精確匹配（EXACT）、正則運算式匹配（REGEX）。 處理方式可以選擇使用檔，也可以選擇合適的時間暫停資料流程（*bpu、*bpafter），人工干預。 通過以上幾個步驟，我們演示了怎樣將HTTP請求重定向到本地的檔，進行web調試。 這種調試方式不需要發佈到線上再驗證，避免了修改不成功、對使用者造成影響的風險，而且不需要搭建複雜的開發伺服器等開發環境，非常適合快速web調試。

延伸閱讀：