大家平時(shí)肯定都用過火狐的Firebug或者谷歌的調(diào)試工具來調(diào)試JS,但遺憾的是我們不能像編輯html,css那樣來直接新增或者刪除JS代碼.

雖然可以通過調(diào)試工具的控制臺(tái)來動(dòng)態(tài)執(zhí)行JS代碼,但有時(shí)候卻遠(yuǎn)遠(yuǎn)不夠用.

特別是當(dāng)產(chǎn)線環(huán)境不能隨意修改文件情況下,用線上環(huán)境來調(diào)試本地代碼更是迫切的需求.

(往往本地測試通過,上線后卻是各種bug.)

?

今天分享一下如何用Fiddler來修改并調(diào)試線上的JS代碼.

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

?

查看首頁源碼發(fā)現(xiàn)一個(gè)js,就拿它開刷了.

?

打開fiddler,捕獲博客園的首頁請(qǐng)求. 找到“aggsite.js”的請(qǐng)求.

?

這里有個(gè)技巧,可以通過 “select”命令來篩選js請(qǐng)求. 在下面的命令框輸入“select script”回車即可. 如下圖.

?

接著把這個(gè)請(qǐng)求拖動(dòng)到“AutoResponder”面板.

拖動(dòng)之前記得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.

?

然后在Rule Editor的第二下拉框選擇 “Find a file”來選擇本地的JS文件, 選擇后點(diǎn) Save.

這里我用本地的“test fiddler.js”來替換博客園首頁的“aggsite.js”.

“test fiddler.js”內(nèi)容如下. 就是向body追加一段紅色文字.

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

?

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

可以看到,我們替換的js被執(zhí)行了,接下來就可以在本地使用我們順手的編輯器來寫JS代碼了,

本地保存后,刷新網(wǎng)頁就能立刻看到效果,就跟在本地開發(fā)一樣,是不是很方便?

?

最后想說其實(shí)你可以用同樣的方式來替換圖片,CSS,HTML.

總之一點(diǎn)就是利用線上的環(huán)境來測試你的代碼,但又不對(duì)線上產(chǎn)生影響.

要知道保證不出onlinebug bug是多么的重要,雖然很難做到,但能避免就盡量吧.

Enjoy!

總結(jié)

以上是生活随笔為你收集整理的如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。