使用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調試。