關於顯示偵錯訊息

前言

  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()