使用Fiddler提高前端工作效率 (實例篇)
在上一篇（介紹篇）中，我們對Fiddler Web Debugger有了簡單的接觸，也許你已經開始在用Fiddler進行HTTP相關的調試，在這一篇，我們將通過一個實例瞭解Fiddler的神奇魔法。
在我們前端開發的日常工作中，發現服務器上某個css/javascript文件有問題，需要修改，那真是家常便飯。通常，我們需要將文件進行修改，然後重新發布再驗證，這樣就很容易影響到生產環境的穩定性。更普遍的做法是，我們在開發環境中修改文件並驗證，然後發佈到生產環境。雖然安全，卻比較繁瑣。而利用Fiddler的可以修改HTTP數據的特性，我們就非常敏捷地基於生產環境修改並驗證，確認後再發布。
假設我們發現這個頁面有問題，需要修改所引用的js文件（http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102）。
第一步：用Fiddler查看頁面的數據流列表，找到這個js文件的session
tip: 最好是沒有緩存的返回內容（Result Code是200），這樣可以進行下一步的保存。不是200也沒關係，你只要本地硬盤上有這個文件就好了。
第二步：將js文件保存到本地（如果本地已經有這個文件，可以跳過這步）
在這個js session上右鍵點擊，選擇“Save – Response –Response Body…”，將js文件的內容保存到本地。記住存的位置，下面我們會用到這個保存下來的文件。
第三步：開啓Fiddler的請求自動重定向功能
打開AutoResponder標籤設置。有沒有看到界面上有兩個複選框？第一個的作用是開啓或禁用自動重定向功能，我們就可以在下面添加重定向規則了。第二個複選框框勾上時，不影響那些沒滿足我們處理條件的請求。
第四步：創建重定向規則，將目標是這個js的HTTP請求重定向到本地文件
我們可以通過“Add…”按鈕手動添加規則，不過這個URL已經出現在我們的session列表中，可以直接拖動過來。在左側的Session列表中選擇第一步找到的session，拖動到AutoResponse標籤中。這樣就創建了一個針對這個URL的規則。
Fiddler幫我們生成的規則是：
- 當URL爲：http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102
- 返回200，使用和Session 4一模一樣的內容返回
我們需要修改這個規則，
選擇“Find a file…”，就可以選擇本地的文件作爲返回的body內容。
選擇我們剛剛保存下來的文件。
刷新一下瀏覽器頁面，看一下session列表，如果像下面這樣，這個session的底色是灰色的，那麼恭喜你，你已經成功將這個請求重定向到本地文件了！
tip: 如果瀏覽器用的是Firefox，記得先清一下臨時文件緩存，因爲Firefox是真正的緩存，當判斷文件的緩存還未過期時，就不會再發請求出來，Fiddler就獲取不到了。
第五步：修改本地文件，進行測試
我們在本地的js文件中加一句alert(‘hello’)
刷新瀏覽器，看看效果，如果alert出來，那就成功了。
繼續修改這個文件並測試，成功修復問題後，我們就可以發佈修改後的文件了。
小結：自動重定向功能是Fiddler最實用的功能，這裏的Rule可以自由地設定，可以使用搜索（默認）、精確匹配（EXACT）、正則表達式匹配（REGEX）。處理方式可以選擇使用文件，也可以選擇合適的時間暫停數據流（*bpu、*bpafter），人工干預。通過以上幾個步驟，我們演示了怎樣將HTTP請求重定向到本地的文件，進行web調試。這種調試方式不需要發佈到線上再驗證，避免了修改不成功、對用戶造成影響的風險，而且不需要搭建複雜的開發服務器等開發環境，非常適合快速web調試。