網頁開發的屠龍刀 - Firebug

Firebug 是 Firefox 瀏覽器的擴充套件，能讓網頁設計師快速及方便的觀察修改 HTML、CSS、DOM跟JavaScript 程式，甚至還可以測出網頁內容載入的速度，讓拖慢網站的兇手跑不掉！

軟體名稱：Firebug
軟體版本：1.3.3
軟體語言：中文
軟體性質：免費
檔案大小：529 KB
系統需求：Firefox 瀏覽器
官方網址：http://www.getfirebug.com/
下載網址：https://addons.mozilla.org/zh-TW/firefox/addon/1843



Firebug 雖然功能項目很多，不過使用方法都很簡單，因此我們這邊只針對 JavaScript 除錯工具的部份來說明。

啟用 Firebug

在安裝完 Firebug 之後，我們就能在 Firefox 瀏覽器的右下角看到一隻小蟲(螢火蟲)的圖示，請按一下那隻小蟲



預設檢測的功能都是沒啟用的，因此我們先切到「主控台」，然後勾選啟用要檢測的項目，最後要記得按下「Enable select panels for Local Files」鈕。如果只是想測測網頁載入速度的話，可以只勾選「Net」的項目就好。



檢測及修改 HTML / CSS

接下來我們就在「HTML」的區塊中看到現在網頁的 HTML。如果把滑鼠移到某一個 HTML 的部份時，上面網頁的部份也會有選取的效果



且也能直接在下面直接修改 HTML 內容，在修改的同時也會改變網頁的內容



要修改 CSS 內的容話，也能在右邊的區塊中來做變更



JavaScript 的除錯

再切到「Script」的區塊，在左邊行號點一下左鍵就能在 JavaScript 中設中斷點



接著只要重整網頁後，就能對內容進行中斷監測的動作，同時右邊的監看視窗也會列出所有的物件及變數內容。如果要繼續執行下去的話，只要按「藍色」鈕後就能繼續執行下去



除錯訊息的輸出

那如果我們要怎樣才能從網頁程式中輸出一些 Debug 訊息呢？Firebug 其實也能像在Flash 中使用 trace() 的方式來輸出訊息，只要使用 console.log() 的方法就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript">
<!--
	$(function(){
 
		console.log("jQuery已經載入並執行囉!!");
 
		console.log("現在時間是：", new Date());
 
		var str = "男丁格爾";
		var age = 18;
 
		console.log("我是 %s, 我今年 %d 歲", str, age);
 
	});
//-->
</script>

當使用有裝 Firebug 的 Firefox 瀏覽器來瀏覽時，就能在「主控台」中看到輸出的訊息內容



不過這樣的訊息其實作用並沒有很大，所以 Firebug 又另外提供了 console.debug() / console.info() / console.warn() / console.error() 等方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
<!--
	$(function(){
 
		console.debug("jQuery已經載入並執行囉!!");
 
		console.info("現在時間是：", new Date());
 
		var str = "男丁格爾";
		var age = 18;
 
		console.warn("我是 %s, 我今年 %d 歲", str, age);
 
		console.error("每種訊息都有不同的圖示");
	});
//-->
</script>

在輸出的訊息前面會加上各自的圖示，並提供連結來快速切換到輸出訊息的地方



因為我們這邊有使用 console.error() 的方式來丟出訊息內容，因此在 Firefox 的右下角也會顯示該網頁有一個錯誤



JavaScript 即時運算

不知道有沒有人發現在「主控台」的右邊有一個空白的輸入框，它其實可以讓我們直接對該網頁執行輸入框中 JavaScript 內容



輸入好要執行的內容後，按下「執行」鈕就能進行動作了，在這邊輸入的 JavaScript 會對目前的網頁內容也有效的



當然也能存取到該網頁中的 JavaScript 變數或物件



透過即時運算來執行的內容動作，會在主控台輸出時多加 >>> 的字樣，並且也會顯示執行的程式碼



計算執行時間

有時想知道某些程式執行所花費的時間的話，通常可能要自己寫計時方法來做加減計算，不過貼心 Firebug 也內建的這樣的功能，只要使用 console.time(標籤) 跟 console.timeEnd(標籤) 就會自動輸出執行時間了

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
<!--
	$(function(){
 
		console.time("For 迴圈執行速度測試");
 
		for(var i=0;i<1000000;i++){
 
		}
 
		console.timeEnd("For 迴圈執行速度測試");
	});
//-->
</script>

要注意的是，開始跟結束的標籤內容要一樣才有用，Firebug 是用標籤來判斷的



各位是不是覺得有這樣的除錯工具真的是太棒了呢？！相信好好的利用它，能讓網頁設計師在開發網頁上節省很多不必時間的。