關於顯示偵錯訊息

前言

  JavaScript 提供很多顯示偵錯訊息的方法，之前都只使用 console.log() ，這次把其它的做個學習，在此在個紀錄。

內容

   JavaScript 提供顯示偵錯訊息有 console.log() 、 console.info() 、 console.error() 、console.debug() 與 console.warn() ，參數都是直接填寫要顯示的訊息即可，範例如下

console.debug('debug');
console.log('log');
console.info('info');
console.error('error');
console.warn('warn');

執行結果如下

範例執行結果

一般的 console 都會顯示這五個的結果，差別在於瀏覽器自帶的偵錯器，可以圖中右下看到可以依據不同的群組來顯示訊息， Verbose 群組代表了 console.debug() ， Info 群組裡包含了 console.log() 與 console.info() ，Warnings 群組代表了 console.warn() ， Errors 群組代表了 console.error() ，可以根據欲顯示群組來顯示結果。

參考資料

[ developer.mozilla.org ] console: log()

[ developer.mozilla.org ] console: info()

[ developer.mozilla.org ] console: error()

[ developer.mozilla.org ] console: debug()

[ developer.mozilla.org ] console: warn()

 初探 console.groupCollapsed()

前言

  在先前的 初探 console.group() 可以在瀏覽器的偵錯中摺疊訊息，但一定是展開狀態，能一開始就是縮起來狀態嗎?在此把學習的過程做個紀錄。

內容

  範例如下

console.groupCollapsed( 'MyGroup' );
for(let i=0;i<10;i++)
  console.log(i);
//
console.groupEnd( 'MyGroup' );

執行結果如下

範例執行結果

要預設是縮起來的狀態，只要將原本的 console.group() 換成 console.groupCollapsed() 即可，一樣適用參數分群，一樣是用 console.groupEnd() 做搭配即可。

參考資料

[ developer.mozilla.org ] console.groupCollapsed()

相關文章與資料

初探 console.group()

 初探 console.group()

前言

  在 Debug 有時需要列印出每筆陣列的資料，但數量一多時就要花很多時間在拖卷軸，這時可以透過 console.group()  來完成摺疊資訊的作用，在此把學習的過程做個紀錄。

內容

  範例如下

console.group( 'MyGroup' );
for(let i=0;i<10;i++)
  console.log(i);
//
console.groupEnd( 'MyGroup' );

執行結果如下

範例執行結果

在需要摺疊資訊的地方喚起 console.group() ，並在要摺疊資訊的結尾喚起 console.groupEnd()，二者輸入的參數的是群組名稱，用哪個群組名稱開頭，就用哪個群組名稱結束，結果在一般的 console 還是個別顯示了每筆資料，但在瀏覽器提供的偵錯就會有可以摺疊資訊的按鈕。

參考資料

[ developer.mozilla.org ] console: group()

 初探 console.trace()

前言

  JavaScript 有提供可以觀看 Funciton 喚起順序的 Debug 工具，在此把學習的過程做個紀錄。

  

內容

  範例如下

function DoA(){
  DoB();
}
function DoB(){
  DoC();
}
function DoC(){
  console.trace();
}
//
DoA();

執行結果如下

範例執行結果

想觀看 Funciton 喚起順序可以透過 console.trace() ，不過結果只會出現在瀏覽器的 Debug 工具中，如圖所示。

參考資料

[ developer.mozilla.org ] console: trace()

 初探 console.time()

前言

  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() 基本的使用了 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()

相關文章與資料

初探 console.table()

 初探 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 的結果。

範例執行結果

參考資料

[ developer.mozilla.org ] console: table()