Console命令詳解,讓調試js代碼變得更簡單

console.log(object[, object, ...])
在控制台輸出一條訊息。如果有多個參數，輸出時會用空格隔開這些參數。

第一個參數可以是一個包含格式化預留位置輸出的字串，例如：

console.log("The %s jumped over %d tall buildings", animal, count);

上面的例子可以用下面的無格式化預留位置輸出的代碼替換：

console.log("The", animal, "jumped over", count, "tall buildings");

並且，這兩種方式是可以組合使用的。如果使用了格式化預留位置，而提供的參數的個數多於預留位置的個數，那麼，多餘的參數會以空格分隔的方式附加在字串後面，就像：

console.log("I am %s and I have:", myName, thing1, thing2, thing3);

如果參數是一個Javascript對象，那麼在控制台輸出的就不是靜態文字，而是一個可互動的超連結，點擊超連結可以查看該對象的HTML, CSS, Script, DOM視窗，可用格式化字串%o代替Javascript對象。

console.log("Body tag is %o", document.body);

格式化字串列表：

格式化字串	類型
%s	字串
%d, %i	整型（暫不支援數字型）
%f	浮點型 （暫不支援數字型）
%o	連結化物件

console.debug(object[, object, ...])
在控制台輸出一條訊息，包含一個指向代碼調用位置的超連結。假如是直接在控制台輸入該命令，就不會出現超連結（和console.log()一樣）。

console.info(object[, object, ...])
在控制台輸出一條帶有“資訊”表徵圖的訊息和一個指向代碼調用位置的超連結。

console.warn(object[, object, ...])
在控制台輸出一條帶有“警告”表徵圖的訊息和一個指向代碼調用位置的超連結。

console.error(object[, object, ...])
在控制台輸出一條帶有“錯誤”表徵圖的訊息和一個指向代碼調用位置的超連結。

console.assert(expression[, object, ...])
測試運算式expression是否為真。如果不是真，會在控制台寫一條訊息並拋出異常

console.dir(object)
以列表形式輸出一個對象的所有屬性，有點和你查看DOM視窗相類似。

console.dirxml(node)
輸出一個HTML或者XML元素的XML原始碼。和你在HTML視窗看到的相似。

console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.

The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.

console.group(object[, object, ...])
輸出一條訊息，並開啟一個嵌套塊，塊中的內容都會縮排。調用console.groupEnd()關閉塊。該命令可以嵌套使用。

console.groupEnd()
關閉最近一個由console.group開啟的塊。

console.time(name)
建立一個名字為name的計時器，調用console.timeEnd(name)停止計時器並輸出所耗時間（毫秒）。

console.timeEnd(name)
停止同名的計時器並輸出所耗時間（毫秒）。

console.profile([title])
開啟Javascript效能測試開關。選擇性參數title會在列印效能測試報告時在報告的開頭輸出。

console.profileEnd()
關閉Javascript效能測試開關並輸出報告。

console.count([title])

Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.

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

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

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

Firebug控制台詳解

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

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

一、顯示資訊的命令

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

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

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

比如，在網頁指令碼中插入下面四行：

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

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

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

二、預留位置

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

比如，

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

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

%o預留位置，可以用來查看一個對象內部情況。比如，有這樣一個對象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

然後，對它使用o%預留位置。

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

三、分組顯示

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

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

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

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

　　console.groupEnd();

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

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

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

　　console.groupEnd();

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

四、console.dir()

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

比如，現在為第二節的dog對象，添加一個bark()方法。

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

然後，顯示該對象的內容，

　　console.dir(dog);

五、console.dirxml()

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

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

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

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

　　console.dirxml(table);

六、console.assert()

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

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

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

七、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()。

八、計時功能

console.time()和console.timeEnd()，用來顯示代碼的已耗用時間。

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

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

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

　　}

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

九、效能分析

效能分析（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()的運行效能了。

　　console.profile('效能分析器一');

　　Foo();

　　console.profileEnd();

控制台會顯示一張效能分析表，如。

標題列提示，一共運行了12個函數，共耗時2.656毫秒。其中funcA()運行10次，耗時1.391毫秒，最短已耗用時間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運行1次，耗時1.229ms毫秒。

除了使用console.profile()方法，firebug還提供了一個"概況"（Profiler）按鈕。第一次點擊該按鈕，"效能分析" 開始，你可以對網頁進行某種操作（比如ajax操作），然後第二次點擊該按鈕，"效能分析"結束，該操作引發的所有運算就會進行效能分析。

十、屬性菜單

控制檯面板的名稱後面，有一個倒三角，點擊後會顯示內容菜單。

預設情況下，控制台只顯示Javascript錯誤。如果選中Javascript警告、CSS錯誤、XML錯誤都送上，則相關的提示資訊都會顯示。

這裡比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中以後，網頁的所有ajax請求，都會在控制檯面板顯示出來。

比如，點擊一個YUI樣本，控制台就會告訴我們，它用ajax方式發出了一個GET請求，http請求和響應的頭資訊和內容主體，也都可以看到。

[參考文獻]

* Firebug Tutorial - Logging, Profiling and CommandLine (Part I)

* Firebug Tutorial - Logging, Profiling and CommandLine (Part II)

（完）