フロントエンドやNode.jsの開発では、処理のフェーズや変数の内容を確認するためにconsole.log()を使うことが多いと思いますが、Console APIには、console.log()以外にも便利なメソッドがたくさん用意されています。

この記事では現在Console API (Living Standard)で定義されているメソッドをまとめます。分類や掲載順は独断と偏見によるものです。

シンプルな表示メソッド

`console.log()`

指定した内容をコンソールに表示します。Log Levelはlogです。

`console.debug()`

指定した内容をコンソールに表示します。console.log()のエイリアスと説明されることもありますが、Log Levelは異なっておりdebugです。

Chromeでこのメソッドのメッセージを表示するためには、Log Levelで”Verbose”をONにする必要があります。

`console.info()`

指定した内容をコンソールに表示します。Log Levelはinfoです。

`console.warn()`

指定した内容をコンソールに表示します。Log Levelはwarnです。

`console.error()`

指定した内容をコンソールに表示します。Log Levelはerrorです。Chromeではスタックトレースを併せて確認することができます。

フォーマット指定子の使用

これらのメソッドでは、フォーマット指定子を使用することができます。出力する内容の形式を指定したり、CSSを使って出力にスタイルを適用したりすることが可能です。

使用可能なフォーマット指定子は次の7つです。フォーマット指定子そのものを出力したい場合は、%を使ってエスケープすることが可能のようです。

指定子	効果
`%s`	文字列として出力
`%d`	整数として出力（`%i`と同じ）
`%i`	整数として出力（`%d`と同じ）
`%f`	小数として出力
`%o`	最適な形式(optimally useful formatting)で出力
`%O`	通常のオブジェクトとして出力
`%c`	先頭に付し、CSSで出力を装飾する

使用例

console.log('It is "%s" now.', new Date())
// It is "Thu Mar 08 2018 11:45:25 GMT+0900 (JST)" now.

console.debug('Formatting Math.PI by %%d: %d', Math.PI)
// Formatting Math.PI by %d: 3

console.info('Formatting Math.PI by %%i: %i', Math.PI)
// Formatting Math.PI by %i: 3

console.warn('Formatting Math.PI by %%f: %f', Math.PI)
// Formatting Math.PI by %f: 3.141592653589793

console.log('Output window by %%o: %o', window)
// Output window by %o: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
// (Windowは展開可能)

console.log('Output window by %%O: %O', window)
// Output window by %O: Window
// (Windowは展開可能)

console.info('%cIt is a fine day!', 'font-weight: bold; text-decoration: underline')
// It is a fine day! (太字＋下線で表示される）

%oと%Oは似ていますが、出力のされ方が若干異なっています。

便利な表示メソッド

`console.dir()`

指定した内容をオブジェクトの形式でコンソールに表示します。

仕様では第2引数でオプションを指定できるようになっていますが、Chromeでは特に設定できるオプションは無いようです。

`console.dirxml()`

指定したオブジェクトをXML表現でコンソールに表示します。Chromeだと、Elementsタブと同じ形式で出力されます。

console.dir(document.body)
// body
// (展開するとbody要素ノードのプロパティにアクセスできる)

console.dirxml(document.body)
// <body>...</body>
// (展開するとbody要素を基点としたDOMツリーにアクセスできる)

`console.table()`

指定した内容を表形式でコンソールに表示します。第2引数を使って、表示させる列を指定することができます。

console.table([3, 4, 5])
// | (index) | Value |
// | 0       | 3     |
// | 1       | 4     |
// | 2       | 5     |

console.table({ a: 1, b: 2, c: 3})
// | (index) | Value |
// | a       | 1     |
// | b       | 2     |
// | c       | 3     |

console.table([{ a: 3, b: 2 }, { a: 0, c: 1 }, { b: 4, c: 3 }])
// | (index) | a     | b    | c    |
// | 0       | 3     | 2    |      |
// | 1       | 0     |      | 1    |
// | 2       |       | 4    | 3    |

console.table('hello')
// (何も表示されない)

console.table([{ name: 'Bob', age: 10 }, { name: 'John', age: 8 }, { name: 'Mike', age: 9 }], 'name')
// | (index) | name   |
// | 0       | "Bob"  |
// | 1       | "John" |
// | 2       | "Mike" |

`console.trace()`

スタックトレースを表示します。引数は表示時のメッセージとなります。

const a = () => {
  b()
}

const b = () => {
  c()
}

const c = () => {
  console.trace('Hello')
}

a()

// Trace: Hello
//     at c (test.js:10:11)
//     at b (test.js:6:3)
//     at a (test.js:2:3)

グループ関係のメソッド

`console.group()`

指定したラベルでグループを生成し、コンソールを1段階インデントします。グループは展開された状態で表示されます。

`console.groupCollapsed()`

指定したラベルでグループを生成し、コンソールを1段階インデントします。グループは折りたたまれた状態で表示されます。

`console.groupEnd()`

グループを解除し、コンソールのインデントを1段階戻します。

使用例

console.group('test')
console.log('test log')

console.groupCollapsed('test inner')
console.log('test inner log')
console.log('test inner log2')
console.groupEnd()

console.log('test log2')
console.groupEnd()

// test (折りたたみ可能）
// | test log
// | test inner (展開可能）
// | test log2

//  ↓ (test innerを展開)

// test (折りたたみ可能）
// | test log
// | test inner (折りたたみ可能）
// | | test inner log
// | | test inner log2
// | test log2

タイマー関係のメソッド

`console.time()`

指定したラベルでタイマーを開始します。

`console.timeEnd()`

指定したラベルのタイマーを停止し、経過時間をコンソールに出力します。

使用例

console.time('test')

console.timeEnd('test')
// test: 7939.598876953125ms

console.timeEnd('test')
// Timer 'test' does not exist

その他のメソッド

`console.assert()`

第1引数の評価の結果がtrueの場合には何もせず、falseの場合はコンソールにエラーメッセージを表示します。第2引数以降はコンソールに出力されるメッセージして使われます。

assertはテストの分野で使用される用語で、処理の結果や変数の内容が想定どおりかどうか確認することを指します。

const a = 10

console.assert(a === 10, 'a is not 10')
// (何も出力されない)

console.assert(a === 5, 'a is not 5')
// Assertion failed: a is not 5

`console.count()`

指定したラベルの数値を1増やします。

console.count('test')  // test: 1
console.count('test')  // test: 2
console.count('test')  // test: 3

console.count('test2')  // test2: 1
console.count('test2')  // test2: 2
console.count('test2')  // test2: 3

`console.clear()`

コンソールの内容をクリアします。

まとめ

いかがでしょうか。知らなかった、使ったことがないというメソッドはありましたか？

単にメッセージを表示する以外にも、テストやデバッグに便利なメソッドが多くありますので、1つでも多く使いこなせるようにしたいですね。