用Firebug: 調試JavaScript、HTML和CSS

免費提供的Firebug對於Firefox來說是一個優秀的開發外掛程式。它是一個整合的用於監視和調試JavaScript、HTML和CSS的工具。下面我們就來看看Firebug的功能和優勢。

　　
      Firebug概述

　　Firebug非常有意思的一點是它與Firefox的緊密整合。你可以在瀏覽器裡或者在一個單獨的視窗裡開啟Firebug。如果在瀏覽器裡開啟，Firebug會被放在Web頁面的底部——一個能夠通過單獨選項卡或者視窗附在不同頁面上的單獨執行個體。

　　介面上有四個（原文如此——譯者注）選項卡——HTML、CSS、Script、DOM、Net——每一個都與頁面不同的內容相對應，還有一個用於錯誤和日誌資訊的控制台。你可以選擇每個選項卡看看對應的頁面元素。

　　使用代碼

　　HTML、CSS、Script和DOM選項卡讓你可以窺探到頁面各種代碼的狀況。HTML選項卡代表頁面的HTML元素。你可以展開和／或摺疊這些元素以查看或隱藏子項目。JavaScript和DOM選項卡也是如此。這一功能讓你很容易就能夠深入理解頁面的原始碼。

　　調試

　　Firebug為使用JavaScript提供了一個可靠的調試器。你可以在指令碼特定的地方設定斷點來終止運行，也可以設定條件斷點，以便程式在滿足某些條件的時候終止運行。此外，調試器還讓你能夠一次一行地進行單步調試，以便密切監視執行情況。

　　在使用調試器的時候，堆棧可以提供任何給定時刻的環境快照。這樣你可以查看變數，並監視呼叫堆疊。觀察功能讓你能夠在代碼執行的時候觀察變數和運算式。JavaScript代碼可以被插到頁面裡以產生調試資料。程式碼分析器能夠產生函數調用報告以及這些調用佔用的時間。調試功能在控制台選項卡裡。

　　控制台是我最喜歡的Firebug功能。它讓我可以即時執行JavaScript；這在我開發代碼的時候非常有用，你可能會關心一段代碼的某一行是如何執行的。如果你不記得JavaScript語言的眾多功能，那麼自動完成功能能夠幫你解決問題。除了運行代碼，它還會顯示JavaScipt的錯誤訊息日誌。

　　Firebug控制台API提供了控制台變數，你可以在Web頁面的代碼裡使用這些變數，以便在指令碼執行的時候產生調試資訊。它帶有很多協助處理調試的方法，包括log、trace和debug等。

　　網路活動

　　通過Net選項卡可以查看與有關頁面相關聯的網路活動。它會顯示所有與頁面有關的下載以及每項資源花了多長時間下載。來自於緩衝的請求都用顏色加以區分。來自緩衝的項目都是淺灰色的，這樣你在快速探索的時候就會知道使用緩衝最佳化頁面載入時間的效率情況。

　　Net帶有自己的次級選項卡以過濾需要顯示的內容——你可能希望列出所有的元素，或者只列出HTML、CSS、JavaScript、圖片，以及Flash元素。XBR選項卡讓你可以檢查HTTP的標題和伺服器響應；當你使用AJAX應用程式的時候，這是一個相當好的功能。
-------------------------------------------------------------------------
Firebug:
http://getfirebug.com/releases/firebug/1.4X/    

安裝:開啟Firefox瀏覽器後,直接拖至Firefox內,它會自動提示安裝,並重啟, 開啟 Mozilla Firefox的工具菜單中, 就可以看到Firebug子功能表.

安裝就不用說了，很簡單，在FireFox上外掛程式庫裡找到FireBug就Ok了。是FireBug Debug 視窗。

     
      簡而言之，FireBug 可以讓我們在任何時候debugJS 並查看變數，同時可以通過它找出JS中效能瓶頸。
      是如何找到Web應用的JS，啟用Firebug，點Script，然後在All 旁邊選擇你要Debug的JS。

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

是如何在斷點上設定條件，如果條件符合，就進入斷點，這個功能很不錯，特別是Debug很複雜的Function時候。

 
是如何單步調試，跟Eclipse一樣 F11單步

是查看調用的Stack，對以複雜的JS Debug很有協助。

是查看變數 基本跟EclipseDebug 一樣。

是在斷點處查看變數。

有個很好用的功能，程式碼之間快速調轉，使得對上千行的JS調試很輕鬆。

就是Performance 測試結果，使用很簡單 點Profile

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

      

 

 

Firebug快速鍵列表2008-04-06 00:12

firebug是Firefox瀏覽器一個強大的外掛程式 對於web開發和設計人員來說的確是不可多得的工具 Open Firebug Panel F12 Close Firebug Panel F12 Open Firebug in Window Ctrl+F12 ⌘+F12 Switch to Previous Tab Ctrl+` Option+Tab Focus Command Line Ctrl+Shift+L ⌘+Shift+L Focus Search Box Ctrl+Shift+K ⌘+Shift+K Toggle Inspect Mode Ctrl+Shift+C ⌘+Shift+C Toggle JavaScript Profiler Ctrl+Shift+P ⌘+Shift+P Re-Execute Last Command Line Ctrl+Shift+E HTML Tab Edit Attribute Click on name or value Edit Text Node Click on text Edit Element Double-Click tag name Next Node in Path Ctrl+. Previous Node in Path Ctrl+, HTML Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab HTML Inspect Mode Cancel Inspection Esc Inspect Parent Ctrl+Up ⌘+Up Inspect Child Ctrl+Down ⌘+Down Script Tab Continue F5 Ctrl+/ ⌘+/ Step Over F10 Ctrl+' ⌘+' Step Into F11 Ctrl+; ⌘+; Step Out Shift+F11 Ctrl+Shift+; ⌘+Shift+; Toggle Breakpoint Click on line number Disable Breakpoint Shift+Click on line number Edit Breakpoint Condition Right-Click on line number Run to Line Middle-Click on line number Ctrl+Click on line number ⌘+Click on line number Next Function on Stack Ctrl+. Previous Function on Stack Ctrl+, Focus Menu of Scripts Ctrl+Space ⌘+Shift+Space Focus Watch Editor Ctrl+Shift+N ⌘+Shift+N DOM Tab Edit Property Double-Click on empty space Next Object in Path Ctrl+. Previous Object in Path Ctrl+, DOM and Watch Editor Finish Editing Return Cancel Editing Esc Autocomplete Next Property Tab Autocomplete Previous Property Shift+Tab CSS Tab Edit Property Click on property Insert New Property Double-Click on white-space Focus Menu of Style Sheets Ctrl+Space ⌘+Shift+Space CSS Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Autocomplete Next Keyword Up Autocomplete Previous Keyword Down Layout Tab Edit Value Click on value Layout Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Command Line (small) Autocomplete Next Property Tab Autocomplete Previous Property Shift+Tab Execute Return Inspect Result Shift+Return Open Result's Context Menu Ctrl+Return ⌘+Return Command Line (large) Execute Ctrl+Return ⌘+Return