[javascript入門] console.log以外のコンソールログ出力方法まとめ

はじめに
コンソールオブジェクト一覧
使用例
- console.time/timeEnd
- console.group/groupEnd
最後に

はじめに

javascriptの開発時、console.log利用してブラウザなどのコンソールにログを出力するケースが多いかと思います。
よく利用するconsole.logですが、他にもwarningメッセージやエラーメッセージなど、各用途ごとにさまざまなオブジェクトが用意されています。

今回は、このconsole.○○のようなコンソールオブジェクトをすべて紹介したいと思います。

コンソールオブジェクト一覧

javascriptによる開発でよく利用するであろうコンソールオブジェクトを確認まとめました。

Method	説明
console.log()	一般的なログ情報を出力するために利用します。
console.info()	情報ログを出力する際に利用します。
console.debug()	デバッグメッセージを出力する際に利用します。
console.warn()	警告メッセージを出力する際に利用します。
console.error()	エラーメッセージを出力する際に利用します。
console.assert()	第１引数がfalseの場合に、メッセージとスタックトレースをコンソールに出力します。
console.clear()	コンソールをクリアします。
console.count()	指定したラベルを用いて呼び出された回数を出力しいます。
console.dir()	指定されたJavascriptオブジェクトのプロパティをすべてコンソール上で見ることができます。
console.group()	ログ出力に対してインライングループを作成します。
console.groupEnd()	group()で作成されたインライングループを終了します。
console.table()	配列などのデータを、表形式で表示します。
console.time()	タイマーを起動します。
console.timeEnd()	time()で起動したタイマーを終了させます。呼び出し後、ミリ秒単位で経過時間を出力します。
console.trace()	スタックトレースを表示します。

使用例

console.logやinfo、warn、errorなどはよく利用する方も多いかと思います。infoやwarn、errorを利用することで、出力する背景色が変わります。今回の使用例はtimeやgroupについて紹介しておきます。それ以外は普通に単体で利用できます。

console.time/timeEnd

console.time();
// ...何かしらの処理
console.timeEnd();

// Console: default: 0.0029296875 ms

console.time("time1");
// ...何かしらの処理
console.timeEnd("time1");

// Console: time1: 0.0029296875 ms

引数にラベルをつけると、そのラベル名でコンソール出力されます。処理速度を図るのにとても簡単に実装できるタイマーです。

console.group/groupEnd

console.log("group indent level 0");
console.group()
console.log("group indent level 1-1");
console.log("group indent level 1-2");
console.group()
console.log("group indent level 2-1");
console.log("group indent level 2-2");
console.groupEnd();
console.log("group indent level 1-3");
console.groupEnd();
console.log("group indent level 0");

// Console: group indent level 0
// Console: ▽ console.group
// Console:    group indent level 1-1
// Console:    group indent level 1-2
// Console:    ▽ console.group
// Console:       group indent level 2-1
// Console:       group indent level 2-2
// Console:    group indent level 1-3
// Console: group indent level 0

出力結果を見てみると、ログ出力がグループ化されていることがわかります。
利用用途としては関数の深さでグルーピングすることで、どこでどのようなエラーが発生しているかどうか見分けることが容易になりますね。