不同類別資訊的輸出

console.log('文字資訊');

console.info('提示資訊');

console.warn('警告資訊');

console.error('錯誤資訊');

追蹤呼叫堆疊（比較實用）

使用Console.trace()來追蹤函式被呼叫的過程，在複雜專案時呼叫過程非常多，用這個命令來幫你縷清。

function add(a, b) {

      console.trace("Add function");

      return a + b;

}

function add3(a, b) {

     return add2(a, b);

}

function add2(a, b) {

      return add1(a, b);

}

function add1(a, b) {

     return add(a, b);

}

var x = add3(1, 1);

結果

計時功能

使用Console.time()和Console.timeEnd()包裹需要計時的程式碼片段，輸出執行這段程式碼的事件。

• Console.time()中的引數作為計時器的標識，具有唯一性。
• Console.timeEnd()中的引數來結束此標識的計時器，並以毫秒為單位返回執行時間。
• 最多同時執行10000個計時器。

console.time("Chrome中迴圈1000次的時間");

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

console.timeEnd("Chrome中迴圈1000次的時間");

分組輸出

使用Console.group()和Console.groupEnd()包裹分組內容。

還可以使用Console.groupCollapsed()來代替Console.group()生成摺疊的分組。

console.group('第一個組');

      console.log("1-1");

      console.log("1-2");

      console.log("1-3");

console.groupEnd();

console.group('第二個組');

      console.log("2-1");

      console.log("2-2");

      console.log("2-3");

     console.groupEnd();

Console.group()還可以巢狀使用

表格輸出

使用console.table()可以將傳入的物件，或陣列以表格形式輸出。適合排列整齊的元素

var Obj = {

     Obj1: { a: "aaa", b: "bbb", c: "ccc" },

     Obj2: { a: "aaa", b: "bbb", c: "ccc" },

     Obj3: { a: "aaa", b: "bbb", c: "ccc" } }

console.table(Obj);

var Arr = [ ["aa","bb","cc"], ["dd","ee","ff"], ["gg","hh","ii"], ] ；

console.table(Arr);

檢視物件

使用Console.dir()顯示一個物件的所有屬性和方法 在Chrome中Console.dir()和Console.log()效果相同

var CodeDeer = { nema: 'CodeDeer', blog: 'www.xluos.com', }

console.log("console.dir(CodeDeer)");

console.dir(CodeDeer);

console.log("console.log(CodeDeer)");

console.log(CodeDeer);

檢視節點

使用Console.dirxml()顯示一個物件的所有屬性和方法 在Chrome中Console.dirxml()和Console.log()效果相同

條件輸出

利用console.assert(),可以進行條件輸出。

• 當第一個引數或返回值為真時，不輸出內容
• 當第一個引數或返回值為假時，輸出後面的內容並丟擲異常

console.assert(true, "你永遠看不見我");

console.assert((function() { return true;})(), "你永遠看不見我");

console.assert(false, "你看得見我");

console.assert((function() { return false;})(), "你看得見我");

計次輸出

使用Console.count()輸出內容和被呼叫的次數

(function () {

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

         console.count("執行次數：");

    }

})()

效能分析

使用Console.profile()和Console.profile()進行效能分析，檢視程式碼各部分執行消耗的時間，但是我在Chrome自帶的除錯工具中並沒有找到在哪裡檢視這兩個方法生成的分析報告。應該需要其他的除錯工具。

格式化輸出

樣例：

var arr = ["小明", "小紅"];

console.log("歡迎%s和%s兩位新同學",arr[0],arr[1]);

console.log("圓周率整數部分：%d，帶上小數是：%f",3.1415,3.1415); 

自定義樣式

使用%c為列印內容定義樣式,再輸出資訊前加上%c，後面寫上標準的css樣式，就可以為輸出的資訊新增樣式了

console.log("%cMy stylish message", "color: red; font-style: italic");