在上一篇(介紹篇)中,我們對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調試。
延伸閱讀:
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy