在 Debug 有時需要列印出每筆陣列的資料，但數量一多時就要花很多時間在拖卷軸，這時可以透過 console.group() 來完成摺疊資訊的作用，在此把學習的過程做個紀錄。
範例如下
console.group( 'MyGroup' ); for(let i=0;i<10;i++) console.log(i); // console.groupEnd( 'MyGroup' );
執行結果如下
 |
| 範例執行結果 |
在需要摺疊資訊的地方喚起 console.group() ，並在要摺疊資訊的結尾喚起 console.groupEnd()，二者輸入的參數的是群組名稱，用哪個群組名稱開頭，就用哪個群組名稱結束，結果在一般的 console 還是個別顯示了每筆資料，但在瀏覽器提供的偵錯就會有可以摺疊資訊的按鈕。
JavaScript 有提供可以觀看 Funciton 喚起順序的 Debug 工具，在此把學習的過程做個紀錄。
範例如下
function DoA(){
DoB();
}
function DoB(){
DoC();
}
function DoC(){
console.trace();
}
//
DoA();
執行結果如下
 |
| 範例執行結果 |
想觀看 Funciton 喚起順序可以透過 console.trace() ，不過結果只會出現在瀏覽器的 Debug 工具中，如圖所示。
JavaScript 本身有提供給偵錯用的計時器，在此把學習的過程做個紀錄。
範例如下
console.time('Timer1');
setTimeout(() => {
console.timeEnd('Timer1');
}, 1000);
結果如下
 |
| 範例執行結果 |
使用 console.time() 來計算時間需要搭配 console.timeEnd() 來使用，console.time() 用來開啟計時器，可以根據輸入參數來為計時器命名，要停止計時則是透過 console.timeEnd() ，參數一樣是計時器的名稱，輸出結果只會出現瀏覽器的偵錯器，console 裡只會顯示計時器名稱不論是開始和結束。
[ developer.mozilla.org ] console: time() static method
在之前的 初探 console.table() 基本的使用了 console.table() ，它不只可以顯示表格還可以指定顯示欄位，該怎麼做呢?在此把學習的過程做個紀錄。
範例如下
let obj = {
str : "obj",
num : 12
};
let obj1 = {
str : "obj1",
num : 34
};
let obj2 = {
str : "obj2",
num : 56
};
//
console.table( [ obj , obj1 , obj2 ] ,[ 'str' ]);
結果如下
 |
| 範例執行結果 |
要指定顯示欄位只要在第二個參數以陣列的方式指定要顯示的欄位就可以完成，如圖 1 處。
[ developer.mozilla.org ] console: table()
在 Debug 時利用 console.log() 可以顯示文字資訊，但也僅能顯示文字，如果要顯示成表格的話就看得不是很舒服，最近發現瀏覽器有支援表格顯示，在此把學習的過程做個紀錄。
範例如下
let ar = [ 0 , 1, 1224 , 465 ];
let obj = {
str : "obj",
num : 12
};
let obj1 = {
str : "obj1",
num : 34
};
let obj2 = {
str : "obj2",
num : 56
};
//
console.table( ar );
console.table( [ obj , obj1 , obj2 ] );
要顯示表格需要透過 console.table() ，但如果透過像 JS Bin 這樣的工具時會看到和 console.log() 一樣的結果，如下圖 1 的結果，要看到表格必須在瀏覽器自帶的 Debug 才能看到，如下圖 2 的結果。
 |
| 範例執行結果 |