程式學習紀錄舖

之前都沒有仔細研究 FireBug 的使用方式，僅用這篇文章來紀錄之。

FireBug 為 Firefox 的擴充套件，主要能夠方便網頁設計師快速及方便的修改 CSS、DOM、HTML，即時預覽修改效果、 察看及執行 JavaScript 等，還能偵測網路速度，找出拖累網站速度的 BottleNeck

ps. 開啟 FireBug 的熱鍵是 F12，更多熱鍵請看 此頁

Firebug 與 FirebugLite

FireBug 對於 FireFox 有最佳的支援度，也擁有最完整的功能，但 Firebug 也沒有忽略其他瀏覽器的廣大使用者，所以推出了 Firebug Lite 版本，以讓其他瀏覽器的使用者也能夠使用。

以下是在 Firefox 操作的畫面：

以下則是在 Chrome 操作的畫面，會發現功能較陽春：

本篇文章主要針對 Firefox 版本之 Firebug 所撰寫。

FireBug 之功用

Firebug 主要有 5 個 Tab 供使用，說明如下：

(1) Console (主控台)：顯示 JS 傳送的狀況及錯誤訊息，並可利用下方之 >>> 自行輸入 JS

(2) HTML Tab：顯示 HTML 原始檔，並以 DOM 的形式呈現

(3) CSS Tab：顯示該頁所使用之 CSS 樣式表，可直接滑鼠左鍵點選即時編輯及檢視結果

(4) Script Tab：顯示 Javascript 之內容

(5) DOM Tab：顯示所有頁面文件與其屬性，以及其對應的值

(6) Net Tab：顯示所有下載，每個元件的讀取時間，而其中的 XHR Tab 則是為了 AJAX Debug 用的

主控台 (Console Tab)

可顯示頁面目前傳送資料之狀況 (含 Ajax)、警告、Scipt 錯誤等等，也會提醒某些錯誤的發生 (ex. 找不到圖片、資料格式不正確等等)，並告訴我們 Ajax 執行所花的時間、回應狀態、秒數、回應等等。

例如您可在 Gmail 開啟 Firebug 看看，會發現 Gmail 除了剛開始會送訊息去要資料以外，定期還會主動更新資料 (不需刷新)，讓新的 Mail 顯示在 Mail 清單中。

自己撰寫 JavaScript (Console Tab)

在主控台下面有 >>> 的區塊，可以自行補充 JavaScript，例如可輸入 alert(“test”);

則會跳出警告視窗

觀察元件 ( HTML Tab)

點選左邊數過來第二個按鈕，可以即時切換監看之元素，例如我們按下去之後選擇我們常按的 Google 搜尋，將可以看到 Google 在該按鈕所使用的 HTML 原始碼

盒子模型 (HTML Tab)

在 HTML Tab 的右邊也會顯示每個元素的相關盒子模型資訊， 即 padding、border、margin、position等。例如我們選擇上面的 Google 圖片

下方對應的盒子模型會顯示：

即時修改 CSS

Firebug 也提供即時編修 CSS 之功能，只要到 CSS Tab 當中，直接對著CSS修改即可

例如，我想要將 Google 的圖片換成 JOBS，我先用觀察元素之功能，選到 Google 的圖片上

再將圖片之 CSS 改成

就會變成以下的樣子 (改變 CSS 圖片連結，將圖片置換成 Jobs，並調整成適當的大小) ：

利用以上技巧，可以減少 CSS 設計的時間。

偵測網路速度及流量

到 NET Tab 之後，可以察看頁面上每個元件所佔空間及其大小

也可在最下面去觀察 Request 次數及整體流量

如此一來可以更方便的找到程式當中拖慢網頁速度的元兇。

設定 JavaScript 斷點 (Script Tab)

你可以像 IDE 一樣，設計程式的中斷點，只需要在 Scipt Tab 中的左邊程式碼數字按按一下滑雪左鍵，接著再更新一次網頁，下次就會先停在你所設定的位置。。如果要繼續執行下去的話，只要按右邊的「藍色」鈕後就能繼續執行下去。

設定除錯訊息

可在主控台的右邊輸入以下指令，並按執行：

console.debug(‘This is console.debug!’);

console.info(‘This is console.info!’);

console.warn(‘This is console.warn!’);

console.error(‘This is console.error!’);

輸出結果如下，如此一來即可設定不同種類的回應格式：

驗證執行時間

我們可以用以下的代碼來驗證跑10000次空迴圈的時間，一樣是輸入到主控台右邊的空白方格中：

console.time(‘test’);

for(var i=0;i<10000;i++){ }

console.timeEnd(‘test’);

答案是 74 ms

本文轉貼自 Design2u