Firebug入門指南

=================

firebug入門指南

作者：estelle weyl

譯者：阮一峰

本文是firebug的一個概覽，并不對它的所有特性進行詳盡解釋。不過，本文的内容對一個新手來說，應該是足夠了。

目錄

一、安裝firebug

二、打開和關閉firebug

三、firebug視窗概覽

四、随時編輯頁面

五、用firebug處理css

六、盒狀模型

七、評估下載下傳速度

八、dom

九、javascript調試

十、ajax

十一、附注

firebug在firefox浏覽器中運作。另外有一個firebug lite版本，可以通過javascript調用，包含在頁面中，進而在其他非firefox浏覽器中使用。本文不涉及這個版本。

如果你已經安裝過了，那麼請檢查是否更新到了最新版本。打開firefox的"tools"菜單，選擇"add-ons"指令，然後在彈出視窗中點選左下角的"find updates"按鈕。

* 打開firebug：按f12，或者點選浏覽器狀态欄右邊的

綠色标志。

* 關閉firebug：按f12，或者點選浏覽器狀态欄右邊的

綠色标志，或者點選firebug視窗右上角的

紅色關閉标志。 * 在單獨視窗中打開firebug：點選firebug視窗右上角的

紅色箭頭辨別，或者使用ctrl+f12/⌘+f12按鈕。

firebug的相關設定：

* 固定firebug在新視窗打開：先打開firebug，點選左上角的bug标志，選擇options菜單中的"always open in new window"設定。 * 增加/縮小字型大小：先打開firebug，點選左上角的bug标志，選擇"text size"指令。每次字型變化的幅度非常小，你可能需要使用多次。

* 限制隻對某些站點使用firebug：先右擊浏覽器狀态上的green check mark标志，選擇"disable firebug"指令。然後，再右擊這個已經變灰的标志，選擇"allowed sites..."指令，增加允許firebug生效的域名。

* console标簽： 主要使用javascript指令行操作，顯示javascript錯誤資訊，在底部的>>>提示符後，你可以自己鍵入javascript指令。 * html标簽： 顯示html源碼，并且像dom等級結構那樣，每行之前有縮進。你可以選擇顯示或不顯示某個子節點。 * css标簽：浏覽所有已經裝入的樣式表，可以當場對其修改。在firebug視窗上部，"edit"指令的旁邊，有一個本頁面中所有樣式表的下拉清單，你可以選擇一個樣式表進行浏覽。

* script标簽： 顯示javascript檔案及其所在頁面。在firebug視窗上部，"inspect"指令的旁邊，有一個本頁面中所有javascript檔案的下拉清單，你可以選擇一個進行浏覽。你可以在javascript指令中，設定斷點（breakpoint）及其出現的條件。 * dom标簽： 顯示所有的頁面對象和window物體的屬性。因為在javascript中，所有變量都是window物體的屬性，是以firebug會顯示所有變量和它們的值。 * net标簽：顯示本頁面涉及的所有下載下傳，以及它們各自花費的時間，各自的http請求頭資訊和伺服器響應的頭資訊。xhr标簽對ajax調試很有用。

在html标簽中，點選視窗上方的"inspect"指令，然後再選擇頁面中的文本節點，你可以對其進行修改，修改結果會馬上反應在頁面中。

firebug同時是源碼浏覽器和編輯器。所有html、css和javascript檔案中的對象，都可以用單擊或輕按兩下進行編輯。當你輸入完畢，浏覽器中的頁面立刻會發生相應變化，你可以得到瞬時回報。dom浏覽器允許你對文檔結構進行徹底的編輯，不局限于文本節點。在html标簽中，點選視窗上部"inspect"指令旁邊的"edit"指令，下方的視窗就會立刻變成一個黑白的文本編輯視窗，你可以對html源代碼進行任意編輯。在css标簽中，firebug會自動補全你的輸入。在dom标簽中，當你按tab鍵時，firebug會自動補全屬性名。

在dom标簽中，每個html元素的style屬性揭示了該元素的所有css設定。你可以輕按兩下對這些設定進行編輯。

對于那些firefox不支援的css規則，firebug會自動隐藏。比如，firebug會隐藏針對某些浏覽器的css特定設定，以及一些它不支援的css3規則。是以，它會隐藏_height:25px;（下劃線是一個針對ie6的設定）和p:first-of-type {color: #ff0000;} (:first-of-type是一個css3規定的僞類，目前隻有safari 3支援）。但是，這也意味着，如果你恰巧發生了打字錯誤，導緻某些規則無法顯示，那麼你隻有使用其他編輯器顯示全部css内容，找到你的錯誤。

firebug允許你關閉css中的某些語句，頁面會立刻反映相應變化，你可以立刻檢視效果。"關閉"一條語句的方法是，在該語句的左邊點選，會出現一個紅色的

禁止标志。該語句就會變灰。再次點選，該語句就會恢複。

firebug允許你編輯css的屬性和屬性值。你隻要對它們點選，就能編輯。修改後的效果會立刻在浏覽器視窗中顯示出來。這個特性最好的運用，是在确定準确定位的padding和margin時，firebug允許你用方向鍵逐機關的增加。

firebug允許你增加新的屬性和屬性值。增加方法是輕按兩下現有的selector，然後就會出現一個空白的屬性名輸入框，完成輸入後則會出現一個空白的屬性值。

當你在html标簽中，點選一個元素時，左面視窗顯示html代碼，右面視窗顯示該元素的css。在css視窗上方，有一個layout按鈕，點選後會展示與該元素相關的方塊模型，包括padding、margin和border的值。要檢視每一個元素的這三項值，隻需點選"inspect"按鈕，然後用滑鼠懸停在頁面中該元素的上方。

net标簽中圖形化了頁面中所有http請求所用的時間。使用這個功能，必須打開network monitoring，預設設定就是打開，但是你可以在"options"下拉菜單中關閉這個選項。你可以用這項功能評估javascript檔案下載下傳，占用整個頁面顯示的時間。

在每個http請求的左面點選，會顯示該次請求的頭資訊。

在1.0.5版以後，你可以單獨檢視html檔案、css檔案、圖像檔案等各自下載下傳的時間。

dom标簽提供頁面上所有物體的所有屬性的資訊。firebug最酷的功能之一是，它可以動态修改頁面，反映在浏覽器視窗，但是如果使用浏覽器自帶的檢視源碼功能，你會發現源碼并沒有改變。

javascript profiler可以報告你的javascript函數執行所花的時間，是以你可以檢視不同函數對速度的影響。使用這個功能的方法是，打開console标簽，然後點選上面的profile按鈕（上部的按鈕順序是"inspect |clear | profile"）。firebug列出調用的所有函數，及其所花的時間。你可以針對要測試的某個函數，在其前部加上console.profile([title])，在其後部加上console.profileend()。

調試的另一個方法是設定斷點。script标簽允許你在任意行暫停執行。單擊行号，就會設定一個斷點。右擊行号，就可以設定一個斷點出現的條件，隻有當條件為真時，程式才會暫停執行。右面還有一個watch視窗，可以檢視目前變量的值。

net标簽中的xhr功能，對檢視ajax操作特别有用。如果你點選每個伺服器端回應前的加号，你就會看到伺服器端回應的頭資訊和内容。

當通過xmlhttprequest對象向伺服器端發出一個請求時，firebug會記錄請求的post或get内容，以及回應的頭資訊和内容。使用net标簽中的xhr功能，就可以看到這些内容。它會列出所有伺服器的回應，以及所花費的時間。點選前面的+号，如果是get請求，會顯示三個标簽；如果是post請求，會顯示4個标簽：

params: 顯示請求url中所包含的name/value對。 headers: 顯示請求和回應的頭資訊。 response: 顯示實際從伺服器收到的資訊。 post：顯示從通過post請求，送到伺服器的資訊。（此項get請求不包括。）

這四個标簽對編寫和調試程式很有用。檢查post和params标簽，确定你的請求被正确地發出了。檢查response标簽檢視傳回的格式，确定相應的javascript處理函數應該如何編寫。

* firebug 1.05 及以前版本，與firefox 3.0不相容。

（完）