FireBug 調(diào)試JS入門 —如何調(diào)試JS(轉(zhuǎn)載保存)
Posted on 2009-11-27 15:19 非洲小白臉 閱讀(399) 評論(0) 編輯 收藏 所屬分類: 其他資源 安裝就不用說了,很簡單,在FireFox上插件庫里找到FireBug就Ok了。下圖是FireBug Debug 窗口。

FireBug美工用的非常普遍,公司美工妹妹用的非常熟練 呵呵,而對于我們開發(fā)人員,主要用它來Debug JS??纯垂俜綄ebug功能的介紹。
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
簡而言之,F(xiàn)ireBug 可以讓我們在任何時候debugJS 并查看變量,同時可以通過它找出JS中性能瓶頸。
下圖是如何找到Web應(yīng)用的JS,激活Firebug,點Script,然后在All 旁邊選擇你要Debug的JS。
下圖是如何打斷點 基本跟Eclipse一樣,點擊行號就Ok了。
下圖是如何在斷點上設(shè)定條件,如果條件符合,就進入斷點,這個功能很不錯,特別是Debug很復(fù)雜的Function時候。
下圖是如何單步調(diào)試,跟Eclipse一樣 F11單步
下圖是查看調(diào)用的Stack,對以復(fù)雜的JS Debug很有幫助。

下圖是查看變量 基本跟EclipseDebug 一樣。
下圖是在斷點處查看變量。
有個很好用的功能,代碼行之間快速調(diào)轉(zhuǎn),使得對上千行的JS調(diào)試很輕松。
下圖就是Performance 測試結(jié)果,使用很簡單 點Profile
還有一個Log功能比較實用,看下圖 如果你不想每次都進入斷點,用這個就再好不過了。
基本用法就這些了,希望對大家有幫助。

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
簡而言之,F(xiàn)ireBug 可以讓我們在任何時候debugJS 并查看變量,同時可以通過它找出JS中性能瓶頸。
下圖是如何找到Web應(yīng)用的JS,激活Firebug,點Script,然后在All 旁邊選擇你要Debug的JS。

下圖是如何打斷點 基本跟Eclipse一樣,點擊行號就Ok了。





下圖是在斷點處查看變量。

有個很好用的功能,代碼行之間快速調(diào)轉(zhuǎn),使得對上千行的JS調(diào)試很輕松。


還有一個Log功能比較實用,看下圖 如果你不想每次都進入斷點,用這個就再好不過了。
