FireBug調試工具筆記

      Firebug是網頁瀏覽器 Mozilla Firefox下的一款開發類插件， 現屬於Firefox的五星級強力推薦插件之一。它集HTML查看和編輯、Javascript控制檯、網絡情況監視器於一體，是開發 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士軍刀，從各個不一樣的角度剖析Web頁面內部的細節層面， 給Web開發者帶來很大的便利。例如 Yahoo! 的網頁速度優化建議工具 YSlow。下面我們就來學習FireBug工具的使用。若有錯，望提出修改意見。

1.編輯HTML

a.鼠標選中某個html元素，修改相關屬性，便可在頁面中動態的顯示出來

b.點擊小甲蟲右側的箭頭按鈕，就能夠在頁面中點擊某個元素，FireBug中的就會定位到這個元素的html代碼中。

固然，可使用快捷鍵。ctrl+shift+c若是須要查看或者修改快捷鍵的話，能夠點擊小甲蟲圖標，在彈出的菜單中選中「自定義快捷鍵」，在彈出的界面中查看和修改便可。

c，當須要編輯html代碼的時候，咱們有兩種方式，一種是雙擊html代碼，便可對html代碼進行修改，還有一種是右鍵，點擊「編輯」頁面，進入編輯頁面，這個時候，咱們實時的編輯，變化都會反映在頁面上。

2.處理css

在html代碼的右側，是css屬性頁面

a.點擊html代碼，便可看到他的css屬性，咱們能夠在樣式中移動鼠標能夠看到css樣式中字體的大小，圖片和顏色等。

雙擊css便可進行修改，若是須要添加樣式，則只須要在空白的地方就能夠新建樣式，固然，咱們也能夠禁用樣式，當咱們用鼠標移動到樣式上的時，點擊出現的禁用按鈕便可禁用樣式。

若是要刪除某些樣式，則只要雙擊樣式，樣式變成可輸入狀態時，按住鍵盤delete鍵便可。

b.當咱們須要修改一些屬性是數值的類型的樣式的時候，咱們能夠按住鍵盤的上下鍵，便可實現微調樣式，省去咱們每次輸入的時間。若是須要調整0.1個單位的話，那咱們只須要按住ctrl鍵，再用鍵盤上下鍵，便可實現數值樣式的精度更細的微調。若是須要大幅調整的話，則只須要按住shift鍵，再用鍵盤上下鍵，就能夠每次以10個單位調整。若是須要調整不少css代碼，則只須要點擊右側的css，便可直接編輯css代碼。

c.最右側的計算出樣式，能夠看到計算出來的css樣式。佈局：咱們能夠看到盒子模型的佈局。DOM:咱們能夠查看整個頁面的DOM節點2事件：咱們能夠查看當前頁面中的事件。

3.評估頁面下載的速度

點擊firebug面板中的網絡，在載入頁面的時候，便可看到整個頁面的網絡狀況。

在這個頁面中，咱們能夠看到每一個元素所下載的時間，請求方式，狀態、html、css、js等等。

咱們能夠經過時間線來評估整個頁面的下載時間，咱們能夠單擊請求，便可查看這些請求的一些信息。請求頭信息裏，咱們能夠看到請求頭信息，響應頭信息、和響應結果。

4.ajax請求

當咱們輸入ajax請求的時候，XHR就能夠監聽每一次的ajax請求。

ajax中的參數就是咱們傳入或者post的一些名字和字符，頭信息是咱們請求的頭信息。響應是從服務器中返回回來的咱們所接受到的信息。這些信息，在開發中咱們能夠檢查請求是否發出，結果是否返回，返回的結果是否如咱們的指望。

5.javascript控制檯

a.javascript控制檯中能夠讀取咱們在js代碼中的命令。好比：

for(var i=0;i<10;i++)

{

console.log(i);//這樣，每次i值的變化咱們均可以監聽到

}

咱們也可使用這些信息

    console.error(i); //錯誤信息

    console.debug(i); //debug信息

    console.info(i);//詳細信息

咱們也能夠對日誌信息進行分組：

console.group("first");

console.log("11111");

console.log("22222");

console.log("33333");

console.log("44444");

console.groupEnd();

console.group("second");

console.log("aaaa");

console.groupEnd();

當咱們須要顯示一個對象的全部屬性和方法的時候，咱們可使用：

console.dir();

如：console.dir(console);

當咱們須要測試某些代碼的運行速度的時候咱們可使用console.time()函數來測試代碼的運行速度：

6.js調試

當咱們須要調試咱們的代碼的時候，咱們能夠經過面板中的「腳本」來調試咱們的代碼。

點擊「腳本」，咱們能夠看到咱們腳本的代碼和當前的頁面，咱們能夠對腳本代碼設置斷點，對代碼進行調試

在調試的時候，咱們能夠點擊斷點，取消調試，

若是要查看函數的調用狀況：咱們能夠在函數中使用console.trace();

固然，咱們也可使用「歸納」來收集歸納信息，