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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。