火狐的調試利器-----Firebug

每次分享例會同事的分享都會讓我學習到很多知識，因為我的基礎比較差。所以對很多東西都不熟悉。

    今天的分享例會主題是關於Firebug的運用，或許對很多同事來說，這些都不是新知識，但是對我來說我必須得好好總結一下今天所學的知識。

    1.什么是Firebug：

    Firebug 是網頁瀏覽器 Mozilla Firefox 下的一款開發類插件；它集HTML查看和編輯、Javascript控制台、網絡狀況監視器於一體，是開發JavaScript、 CSS、HTML和Ajax的得力助手。Firebug是一個插件，它必須和Firefox（chrome）瀏覽器結合使用；可以方便地啟用/關閉這個插 件，安裝插件之后，打開需要測試的頁面，使用快捷鍵F12喚出Firebug插件，它會將當前頁面分成上下兩個框架。    

      

    2.關於控制台：

    控制台能夠顯示當前頁面中的javascript錯誤以及警告，並提示出錯的文件和行號，方便調試；同時還能夠在控制台中查看變量內容，直接運行javascript語句；控制台還有個重要的作用就是查看腳本的log。

    關於控制台的一些命令：

   （1）console.log(object[,object,...])  類似C語言的printf

     舉例:console.log("The %s jumped over %d tall buildings",animal,count);

          console.log("The",animal,"jumped over",count,"tall buildings");

          console.log("I am %s and I have:"myName, thing1, thing2, thing3);

          console.log("%cThis is red text on a green backgroun","color:red; background-color:green");

  （2）console.debug(object[,object,...])  類似console.log, 會額外的輸出被調用行的超鏈接    

  （3）console.info(object[,object,...])  類似console.debug, 會顯示"info"的顏色和圖標   

 

  （4）console.warn(object[,object,...])  & console.error(object[,object,...])     

 

  （5）console.assert(expression[,object,...]) 判斷一個表達式或變量是否為真, 如果不為真, 則在控制台輸出相應的信息並拋出異常      

  （6）console.dir(object) 以表格方式顯示對象所有屬性, 類似DOM標簽   

  （7）console.trace() 輸出函數被調用的軌跡, 寫在要跟蹤到的函數里, 列出調用堆棧     

  （8）console.time(name)/console.endTime(name) 創建一個計時器,返回直到調用console.endTime(name)時指定相同計時器名所持續的時間       

    3.關於HTML查看器：

    查看器查看的代碼已經經過格式化的，它有清晰的層次，能方便地分辨出每一個標簽之間的從屬並行關系，標簽的折疊功能能夠幫助你集中精力分析代碼；同時HTML查看器會將頁面上改變的內容也抓下來，並以黃色高亮標記，讓網頁的暗箱操作徹底成為歷史。      

 

    4.關於CSS查看器：

    CSS查看器不僅自下向上列出每一個CSS樣式表的從屬繼承關系，還列出了每一個樣式在哪個樣式文件中定義；你可以在這個查看器中直接添加、修改、刪除一些CSS樣式表屬性，並在當前頁面中直接看到修改后的結果。

    CSS查看器還可以以標尺的形式展現當前選擇區塊占用的面積，精確到象素，並且能夠在這個可視化的界面中直接修改各象素的值，頁面上區塊的位置就會隨改動 而變化；在頁面中某些元素出現錯位或者面積超出預料值時，該功能能夠提供有效的幫助，可借此分析offset、margin、padding、size之 間的關系
    5.關於腳本調試器：

    腳本調試器提供了規范的調試環境,單步調試、設置斷點和變量查看等，極大的節約了開發者的時間。     

    6.關於DOM查看器：

    DOM(Document Object Model)里頭包含了大量的Object以及函數、事件，DOM查看器能方便地瀏覽DOM的內部結構，幫助你快速定位DOM對象；雙擊一個DOM對象，即可編輯它的值，非常方便。       

 

    7.關於網絡狀況監視器：

    網絡監視器可用來監視加載 Web 頁面所花費的時間，它能將頁面中的請求數據載入所消耗的時間以矩狀圖呈現出來，進而對網頁進行調優，還能預覽圖片，查看每一個外部文件甚至是xmlHttpRequests請求的http頭等，方便診斷分析。        

   8.關於推薦的文章：

   Firebug 必須掌握的技巧：http://www.blueidea.com/tech/web/2009/7284.asp 

   FireBug調試技巧：http://www.378q.com.cn/html-js-css/178.html

   Firebug 動態調試和優化應用程序：http://www.ibm.com/developerworks/cn/web/wa-aj-firebug/ 

   FireBug網絡監視詳解：http://magustest.com/blog/softwaretesting/introduction-to-firebug-network-monitoring/

   FireBug net面板詳解：http://www.qianduan.net/detailed-firebug-net-panel.html