不只console.log, 還能這樣用（2）

在 中介紹了console對象中的assert,clear,count,countReset等方法。

本文接著介紹其它你不知道的console對象的方法。

輸出錯誤信息console.error()

打印一條錯誤信息，使用方法和前文中提到的console.log()方法一樣也可以使用格式化字符串。

但該方法打印出的內容是紅色的，而且可以展開顯示調用堆棧。

分組輸出內容

分組輸出內容要兩個方法配合使用

1. console.group()和console.groupEnd()
2. console.groupCollapsed()和console.groupEnd()

用法

1、console.group()和console.groupEnd()配合使用

參數標記可以不傳，調用group()方法告訴控制檯要新建一個[標記為標記的]分組， 在調用groupEnd之前輸出的內容會被輸出到一個裡面。

分組是可以嵌套的，但要正確的調用groupEnd()方法結束分組。

console.group([標記])
console.log();
console.error(); 

console.xxx();
console.groupEnd([標記]);

2、console.groupCollapsed()和console.groupEnd()

和1用法一樣，不過該方法輸出的是摺疊的，要點擊展開才能看到

例子

console.group();
console.log('何方博客');
console.error('出現錯誤');
console.groupCollapsed('分組名');
console.log('內分組');
console.groupEnd('分組名');
console.log('外分組');
console.groupEnd();

輸出帶歎號的信息 console.info()

該IE中測試會在內容前面加個感嘆號輸出且沒有格式化效果， 但在Chrome中測試並沒有且和console.log()方法效果完全一致。

記錄性能信息

該方法非標準方法，在有些瀏覽器上可能沒有實現， 就算實現了能調用也可能沒有任何效果 若要統計一段代碼的執行時間可以使用下面介紹的console.time()

記錄性能信息和分組輸出內容一樣，要兩個方法配合使用

1. console.profile()
2. console.profileEnd()

用法

console.profile([標記])//開始記錄
//在這裡執行要記錄的代碼
console.profileEnd([標記])//結束記錄

例子

console.profile()//開始記錄
for(var i = 0;i < 100000; i++){ 

}
console.profileEnd()//結束記錄

輸出表格 console.table()

調用該方法可以把數組或對象輸出為表格的形式

用法

數據可以是對象或數組或對象數組

數據為對象數組時，可使用第二個參數指定要顯示的字段

console.table(數據[,要顯示的列數組]);

例子

var hefang = {
 name: '何方',
 email: '[email protected]'
};
var xiaoming = {
 name: '小明',
 email: '[email protected]'
};
var arr = ['何方博客','https://hefang.link'];
console.table(hefang);
console.table(arr);
console.table([hefang,xiaoming],['email']);

統計代碼執行時間

統計代碼執行時間和分組輸出內容一樣，要兩個方法配合使用

1. console.time()
2. console.timeEnd()

用法

console.time([計時器名稱])//開始計時
//在這裡執行要計時的代碼
console.timeEnd([計時器名稱])//結束計時

例子

console.time()//開始計時
for(var i = 0;i < 100000; i++){
}
console.time('inner');
for(var i = 0;i < 100000; i++){
}
console.timeEnd('inner')
console.timeEnd()//結束計時

添加時間標記 console.timeStamp()

向瀏覽器的 Performance 或者 Waterfall 工具添加一個標記。 這樣可以讓你將代碼中的一個點和其他在時間軸上已記錄的事件相關聯， 例如佈局事件和繪製事件等。

該方法為非標準方法

用法

console.timeStamp([標記]);

輸出警告 console.warn()

該方法和console.error()一樣， 支持格式化輸出，可以展開查看堆棧， 不過該方法輸出的內容是黃色的

輸出調用堆棧console.trace()

調用該方法可以輸出從代碼執行到當前位置的調用堆棧信息

用法

console.trace([標記]);

例子

function func1(){
 console.trace();
}
function func2(){
 func1();
 console.trace('other trace');
}
function func3(){
 func2();
}
func3();