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

はじめに

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

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

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

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

Method説明
console.log()一般的なログ情報を出力するために利用します。
console.info()情報ログを出力する際に利用します。
console.debug()デバッグメッセージを出力する際に利用します。
console.warn()警告メッセージを出力する際に利用します。
console.error()エラーメッセージを出力する際に利用します。
console.assert()第1引数が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

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

最後に

consoleオブジェクトは開発時にとても重要です。ただconsole.logとして出力するのではなく、用途に合わせて出力することで、保守性が高まります。
是非参考にしてみてください。

タイトルとURLをコピーしました