大家平時肯定都用過火狐的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!