新的起點(diǎn) 新的開始

          快樂生活 !

          FireBug 調(diào)試JS入門 —如何調(diào)試JS


                安裝就不用說了,很簡(jiǎn)單,在FireFox上插件庫里找到FireBug就Ok了。下圖是FireBug Debug 窗口。

               FireBug美工用的非常普遍,公司美工妹妹用的非常熟練 呵呵,而對(duì)于我們開發(fā)人員,主要用它來Debug JS。看看官方對(duì)Debug功能的介紹。
           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.
                簡(jiǎn)而言之,F(xiàn)ireBug 可以讓我們?cè)谌魏螘r(shí)候debugJS 并查看變量,同時(shí)可以通過它找出JS中性能瓶頸。
                下圖是如何找到Web應(yīng)用的JS,激活Firebug,點(diǎn)Script,然后在All 旁邊選擇你要Debug的JS。

          下圖是如何打斷點(diǎn) 基本跟Eclipse一樣,點(diǎn)擊行號(hào)就Ok了。
          下圖是如何在斷點(diǎn)上設(shè)定條件,如果條件符合,就進(jìn)入斷點(diǎn),這個(gè)功能很不錯(cuò),特別是Debug很復(fù)雜的Function時(shí)候。
           下圖是如何單步調(diào)試,跟Eclipse一樣 F11單步
          下圖是查看調(diào)用的Stack,對(duì)以復(fù)雜的JS Debug很有幫助。

          下圖是查看變量 基本跟EclipseDebug 一樣。


          下圖是在斷點(diǎn)處查看變量。


          有個(gè)很好用的功能,代碼行之間快速調(diào)轉(zhuǎn),使得對(duì)上千行的JS調(diào)試很輕松。
          下圖就是Performance 測(cè)試結(jié)果,使用很簡(jiǎn)單 點(diǎn)Profile

          還有一個(gè)Log功能比較實(shí)用,看下圖 如果你不想每次都進(jìn)入斷點(diǎn),用這個(gè)就再好不過了。
                 基本用法就這些了,希望對(duì)大家有幫助。


          posted on 2009-04-14 20:01 advincenting 閱讀(54071) 評(píng)論(19)  編輯  收藏 所屬分類: 腳本

          評(píng)論

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-04-15 10:15 于翔

          謝謝,非常有用!  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-04-15 13:01 huliqing

          確實(shí)很不錯(cuò),并且看起來與IE8的“開發(fā)人員工具”很相似。  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-04-15 16:45 demo

          應(yīng)該是IE8的“開發(fā)人員工具”與firebug在靠近。  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-04-17 23:09 foot

          很實(shí)用,
          調(diào)試是門學(xué)問。  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-07-28 13:14 ZengJerry

          但是對(duì)基于jQuery編寫的插件式的js文件,好像無法跟蹤進(jìn)去。試了好多次,雖然在js文件中設(shè)置了斷點(diǎn),但就是debug不到  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-07-28 19:28 advincenting

          沒有問題啊 我們就在JQuery上Debug的, 你是哪個(gè)版本的  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2009-08-23 09:38 jwkljh@qq.com

          請(qǐng)問你有適合3.0以上版本的firefox的firebug插件嗎  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2010-04-02 12:03 dd

          www.aala.com.cn  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2011-08-19 13:39 liyang

          學(xué)習(xí)了  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2011-11-24 11:15 zg

          very good   回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2012-04-25 13:28 dd

          <a></a>  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2012-04-25 13:28 dd

          http://www.99msg.com  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2013-05-20 17:07 easy

          受用了  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2013-07-06 11:35 creak

          @huliqing
          ie的調(diào)試是后出的 跟人家學(xué)的 你的意思等同于 爹跟兒挺像的  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2013-07-30 15:06 fsdf

          sdfsdfs  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2014-05-16 12:09 sunsong

          最后一個(gè)log功能沒說清楚,可以詳細(xì)說說嘛,我到處點(diǎn)沒看到這個(gè)功能.  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS[未登錄] 2014-09-15 08:35 cc

          講的很詳細(xì),對(duì)我很有幫助,非常感謝  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2014-10-14 10:07 hah

          很不錯(cuò)啊  回復(fù)  更多評(píng)論   

          # re: FireBug 調(diào)試JS入門 —如何調(diào)試JS 2015-02-10 15:53 舒健

          @ZengJerry
          同感  回復(fù)  更多評(píng)論   

          公告

          Locations of visitors to this pageBlogJava
        1. 首頁
        2. 新隨筆
        3. 聯(lián)系
        4. 聚合
        5. 管理
        6. <2011年8月>
          31123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          統(tǒng)計(jì)

          常用鏈接

          留言簿(13)

          隨筆分類(71)

          隨筆檔案(179)

          文章檔案(13)

          新聞分類

          IT人的英語學(xué)習(xí)網(wǎng)站

          JAVA站點(diǎn)

          優(yōu)秀個(gè)人博客鏈接

          官網(wǎng)學(xué)習(xí)站點(diǎn)

          生活工作站點(diǎn)

          最新隨筆

          搜索

          積分與排名

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 泊头市| 安吉县| 景洪市| 清苑县| 祁东县| 尚志市| 贡嘎县| 梅河口市| 天津市| 禹城市| 泾阳县| 西城区| 佛教| 深水埗区| 洛南县| 宝鸡市| 保康县| 吴江市| 玉环县| 黄大仙区| 文水县| 凤山县| 龙游县| 广汉市| 太仓市| 易门县| 永修县| 青龙| 织金县| 乐亭县| 温泉县| 宜兴市| 陆丰市| 张掖市| 荆门市| 广东省| 湟中县| 澳门| 肃南| 绍兴市| 胶南市|