初探 console.count()

前言

  JavaScript 有提供計數器給偵錯用，這次把學習的過程做個紀錄。

內容

  範例如下

console.count( 'a' );//a: 1
console.count( 'a' );//a: 2
console.countReset( 'a' );
console.count( 'a' );//a: 1
//
console.count( );//default: 1

這次的情況有點特別，[ jsbin.com ] JS Bin 在跑範例時會無法正常工作，所以這次的範例會使用 [ onecompiler.com ] OneCompiler ，計數使用 console.count() ，參數可用輸入計數器的名稱，要清除計數可以透過 console.countReset() ，在 [ onecompiler.com ] OneCompiler 的執行結果還是和 [ developer.mozilla.org ] console: countReset() 不一樣，console.countReset() 在 MDN 的範例是會有輸出的，但在 onecompiler.com ] OneCompiler 卻不會。

參考資料

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

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

相關文章與資料

[ onecompiler.com ] OneCompiler

[ jsbin.com ] JS Bin

 清除偵錯訊息

前言

  常常遇到滿滿的偵錯訊息嗎?其實偵錯訊息是可以清除的，在此把學習的過程做個紀錄。

內容

  範例如下

console.log( 'I`m message');
console.clear();

執行結果如下

範例執行結果

清除只需透過 console.clear() 即可，不只是一班的輸出會被清除，如圖 1 處，就連瀏覽器的偵錯也會被清除，如圖 2 處。

參考資料

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

 關於顯示偵錯訊息

前言

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