Firebug控制檯詳解

阮一峰發表於2011-03-26

Firebug是網頁開發的利器，能夠極大地提升工作效率。

但是，它不太容易上手。我曾經翻譯過一篇《Firebug入門指南》，介紹了一些基本用法。今天，繼續介紹它的高階用法。

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

Firebug控制檯詳解

作者：阮一峰

Firebug控制檯詳解

控制檯（Console）是Firebug的第一個皮膚，也是最重要的皮膚，主要作用是顯示網頁載入過程中產生各類資訊。

一、顯示資訊的命令

Firebug內建一個console物件，提供5種方法，用來顯示資訊。

最簡單的方法是console.log()，可以用來取代alert()或document.write()。比如，在網頁尾本中使用console.log("Hello World")，載入時控制檯就會自動顯示如下內容。

Firebug控制檯詳解

另外，根據資訊的不同性質，console物件還有4種顯示資訊的方法，分別是一般資訊console.info()、除錯資訊console.debug()、警告提示console.warn()、錯誤提示console.error()。

比如，在網頁尾本中插入下面四行：

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

載入時，控制檯會顯示如下內容。

Firebug控制檯詳解

可以看到，不同性質的資訊前面有不同的圖示，並且每條資訊後面都有超級連結，點選後跳轉到網頁原始碼的相應行。

二、佔位符

console物件的上面5種方法，都可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支援字元（%s）、整數（%d或%i）、浮點數（%f）和物件（%o）四種。

比如，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圓周率是%f",3.1415926);

Firebug控制檯詳解

%o佔位符，可以用來檢視一個物件內部情況。比如，有這樣一個物件：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

然後，對它使用o%佔位符。

　　console.log("%o",dog);

Firebug控制檯詳解

三、分組顯示

如果資訊太多，可以分組顯示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一組資訊");

　　　　console.log("第一組第一條");

　　　　console.log("第一組第二條");

　　console.groupEnd();

　　console.group("第二組資訊");

　　　　console.log("第二組第一條");

　　　　console.log("第二組第二條");

　　console.groupEnd();

Firebug控制檯詳解

點選組標題，該組資訊會摺疊或展開。

Firebug控制檯詳解

四、console.dir()

console.dir()可以顯示一個物件所有的屬性和方法。

比如，現在為第二節的dog物件，新增一個bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

然後，顯示該物件的內容，

　　console.dir(dog);

Firebug控制檯詳解

五、console.dirxml()

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml程式碼。

比如，先獲取一個表格節點，

　　var table = document.getElementById("table1");

然後，顯示該節點包含的程式碼。

　　console.dirxml(table);

Firebug控制檯詳解

六、console.assert()

console.assert()用來判斷一個表示式或變數是否為真。如果結果為否，則在控制檯輸出一條相應資訊，並且丟擲一個異常。

比如，下面兩個判斷的結果都為否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

Firebug控制檯詳解

七、console.trace()

console.trace()用來追蹤函式的呼叫軌跡。

比如，有一個加法器函式。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道這個函式是如何被呼叫的，在其中加入console.trace()方法就可以了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定這個函式的呼叫程式碼如下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

執行後，會顯示add()的呼叫軌跡，從上到下依次為add()、add1()、add2()、add3()。

Firebug控制檯詳解

八、計時功能

console.time()和console.timeEnd()，用來顯示程式碼的執行時間。

　　console.time("計時器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("計時器一");

Firebug控制檯詳解

九、效能分析

效能分析（Profiler）就是分析程式各個部分的執行時間，找出瓶頸所在，使用的方法是console.profile()。

假定有一個函式Foo()，裡面呼叫了另外兩個函式funcA()和funcB()，其中funcA()呼叫10次，funcB()呼叫1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

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

　　}

　　function funcB(count){

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

　　}

然後，就可以分析Foo()的執行效能了。