如何使用Fiddler調試線上JS代碼

你們平時確定都用過火狐的Firebug或者谷歌的調試工具來調試JS,但遺憾的是咱們不能像編輯html,css那樣來直接新增或者刪除JS代碼.

雖然能夠經過調試工具的控制檯來動態執行JS代碼,但有時候卻遠遠不夠用.

特別是當產線環境不能隨意修改文件狀況下,用線上環境來調試本地代碼更是迫切的需求.

(每每本地測試經過,上線後倒是各類bug.)

 

今天分享一下如何用Fiddler來修改並調試線上的JS代碼.

以博客園首頁爲例子,用我本地的一個js文件來替換它的一個js.

 

查看首頁源碼發現一個js,就拿它開刷了.

 

打開fiddler,捕獲博客園的首頁請求. 找到「aggsite.js」的請求.

 

這裏有個技巧,能夠經過 「select」命令來篩選js請求. 在下面的命令框輸入「select script」回車便可. 以下圖.

 

接着把這個請求拖動到「AutoResponder」面板.

拖動以前記得先勾上 「Enable automatic responses」和 「Permit passthrough for unmatched requests」.

 

而後在Rule Editor的第二下拉框選擇 「Find a file」來選擇本地的JS文件, 選擇後點 Save.

這裏我用本地的「test fiddler.js」來替換博客園首頁的「aggsite.js」.

「test fiddler.js」內容以下. 就是向body追加一段紅色文字.

$(function(){ var p=$("<p/>").text("這是fiddler加上的JS").css("text-align","center").css("color","red"); $("body").prepend(p); });

 

好了,刷新博客園首頁看看效果.

能夠看到,咱們替換的js被執行了,接下來就能夠在本地使用咱們順手的編輯器來寫JS代碼了,

本地保存後,刷新網頁就能馬上看到效果,就跟在本地開發同樣,是否是很方便?

 

最後想說其實你能夠用一樣的方式來替換圖片,CSS,HTML.

總之一點就是利用線上的環境來測試你的代碼,但又不對線上產生影響.

要知道保證不出onlinebug bug是多麼的重要,雖然很難作到,但能避免就儘可能吧.

Enjoy!