兩個JavaScript開發必知的利器

轉載請註明出處:http://blog.csdn.net/horkychen

之前有同事遇到了調試壓縮Javascript代碼的問題. 今天終於在Stack Overflow上發現了Charles, 用了Map Local功能,果然是神器. 雖然原理簡單,就是一個Web Proxy, 當讀取某個網頁資源時, 使用本地檔案替換掉原來的檔案, 它確實是一個可以解決實際問題的功能. 特別針對壓縮過的JS指令碼，不容易設定斷點，也不好加一些Log, 這時候用Charles可以幫我們解決這個問題了. 既然將檔案都定位到本地檔案, 我們就可以為所欲為了.
其它諸如CSS的修改也是沒問題.(瀏覽器內建的調試工具可以支援Fine Print, 解決一部分擠成一團的JS Script).

除了Charles之外,還有一個類似的軟體Fiddler. 下面是簡單的對比:

   Charles  ( Mac OS )  商業版    www.charlesproxy.com/download/

   Fiddler (Windows only)  Open-Source  www.fiddler2.com

*已經有不少的相關資料了,我這算是再次傳播吧. 還是那句話:工欲善其事,必先利其器!

軟體功能不算複雜, 很容易掌握. 我這裡簡單貼了兩張Charles的圖. 關於Fiddler可以參考阿里團隊貢獻的文章: 使用Fiddler提高前端工作效率
(執行個體篇).

然後指定本地的一個替代檔案就可以了。

直接使用瀏覽器的Debugger就可以看到效果了.