はじめに

フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります．

しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです．

この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです．

assert

console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります．

第一引数がfalseとなった場合，第二引数をコンソールに出力します．

サンプル

// assertconstwishToSuccess=()=>{returnMath.random()<0.5}console.assert(wishToSuccess(),"失敗しました")

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L3

出力

log

一般的にログを出力するconsole.log()以外にも

• console.info
• console.warn
• console.error

の3種類のレベルに分けたログを出力できます．
それぞれ色で判別できます．

サンプル

// logconsole.info('info')console.warn('warn')console.error('error')

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L9

出力

dir

console.dir()は指定したオブジェクトを折りたたみ式の階層的なリストで表示できます．
またプロパティの対話的なリストを表示できます．

サンプル

// dirconsole.dir(document.location);

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L14

出力

table

console.table()はデータを表形式で表示することができます．

サンプル

// tableconst info={'userAgent':navigator['userAgent'],'language':navigator['language'],'onLine':navigator['onLine'],}console.table(info);

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L17

出力

time

console.timeは重い処理にどれくらい時間がかかるかを計測できるタイマーを起動します．
引数の文字列がキーとなり，同じキーでconsole.timeEnd()が呼ばれるまでの時間を計測します．

同時に10,000個までタイマーを起動できます．

サンプル

// timeconsole.time('counter');let count=0;for(i=0; i<10000; i++){  count+=1}console.log(count);console.timeEnd('counter');

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L25

出力

trace

console.trace()はコンソールにスタックトレースを出力します．

サンプル

functionfoo(){functionbar(){console.trace();}bar();}foo();

https://github.com/fujiyamaorange/console-debug/blob/main/index.js#L34

出力

その他

その他にもグルーピングして表示ができるconsole.group()や呼び出した回数を記録できるconsole.count()などもあります！

ぜひチェックしてみてください！

参考

https://developer.mozilla.org/ja/docs/Web/API/console

https://dev.to/lissy93/fun-with-consolelog-3i59