圖解前端除錯工具Fiddler使用?

Tags: 工具, 前端,

Fiddler 是前端使用最廣泛的線上除錯工具,它不依賴於其它環境,直接安裝即可。缺點是隻能在 win 上使用,因為它是 C# 寫的。

安裝

安裝超級簡單,下載後直接下一步就行了。啟動介面如下圖所示:

圖解前端除錯工具Fiddler使用

使用

大體和 Charles 類似,開啟瀏覽器訪問要除錯的頁面,定位到要除錯的資源(JS、CSS),對映到本地。

還是以 trip.jd.com 下的 search.js 測試

先清掉現有的請求資料,如下圖所示:

圖解前端除錯工具Fiddler使用

瀏覽器開啟訪問 trip.jd.com,Fiddler 可以捕捉到其中的請求,找到 search.js,如下圖所示:

圖解前端除錯工具Fiddler使用

右側面板切換到 AutoResponser ,勾上前兩個選項,如下圖所示:

圖解前端除錯工具Fiddler使用

把左側的 search.js 拖到 AutoResponser 裡,如下圖所示:

圖解前端除錯工具Fiddler使用

右下角 “Rule Editor” 最下面的下拉選擇 “Find a file”,如下圖所示:

圖解前端除錯工具Fiddler使用

選擇之前下載到本地的 search.js 並點選 “save”,如下圖所示:

圖解前端除錯工具Fiddler使用

這時可以任性的修改本地的 search.js了,之前加了個 alert,回到瀏覽器重新整理頁面既可以看到效果了。

相關問題答案