Console API でできること

JavaScript を書いていると、何かと頼りになる console.log。
でも Console API には log 以外にも実用的なメソッドがいくつもあります。
今回は、備忘録的にユースケース別に整理しておきます。

エラーを見落とさない — .warn / .error

console.log だけでデバッグしていると、重要なメッセージが他のログに埋もれがちです。

console.warn('このAPIは非推奨です');
console.error('接続に失敗しました');

.warn は黄色、.error は赤でブラウザのコンソールに表示されます。視覚的に目立つので、重要度に応じてメソッドを使い分けるだけでログが読みやすくなります。
.error に Error オブジェクトを渡すとスタックトレースも表示されるので、エラーのルートを追うときにも便利です。

console.error(new Error('予期しない状態です'));

注意点として、.warn と .error はブラウザのコンソールではフィルタリング対象になります。DevTools の「フィルター」で Warnings や Errors だけに絞れるので、ログが多い場面ほど使い分けが効いてきます。逆に、本番環境でも .error は残したままというケースがあるので、デプロイ前に意図しない出力が残っていないか確認する習慣をつけておくといいです。

データを整理して見る — .table

配列やオブジェクトの中身を確認したいとき、console.log だと展開しないと見えないことがあります。

const users = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 34 },
];

console.table(users);

.table を使うと表形式で出力されます。レコード数が多いときや、複数フィールドを横断して確認したいときに重宝します。
第二引数にカラム名の配列を渡すと、表示するプロパティを絞れます。

console.table(users, ['name']); // name列だけ表示

ただし、ネストが深いオブジェクトは表示が崩れることがあります。フラットな構造のデータに使うのが無難です。また Node.js でも動作しますが、ターミナルへのテキスト表形式出力になるためブラウザほど見やすくはありません。

ログをグループにまとめる — .group / .groupCollapsed

ループや処理の塊でログが大量に出るとき、.group でまとめると折りたたんで管理できます。

console.group('ユーザー処理');
console.log('取得開始');
console.log('3件取得');
console.groupEnd();

最初から折りたたんだ状態にしたい場合は .groupCollapsed を使います。関連するログをひとかたまりとして扱えるので、処理単位でログを整理したいときに効果的です。
落とし穴として、.groupEnd() を呼び忘れるとグループが閉じられないまま残ります。以降のログがすべてそのグループの中に入り続けるので、ループ内で使うときは特に注意が必要です。try-finally で確実に閉じる、という書き方も有効です。

console.group('処理');
try {
  // 処理
} finally {
  console.groupEnd();
}

処理時間を計測する — .time / .timeEnd

「この処理、どのくらいかかってるんだろう？」というときに手軽に使えます。

console.time('データ変換');

// 計測したい処理
const result = heavyTransform(data);

console.timeEnd('データ変換');
// → データ変換: 12.3ms

引数のラベルがキーになるので、複数の計測を同時に走らせることもできます。performance.now() を自分で書かなくて済むので、ちょっとした計測ならこれで十分です。
注意点がいくつかあります。まず、同じラベルで .time を二重に呼ぶと警告が出て計測がリセットされます。ラベルはユニークにしておくのが無難です。また、計測精度はミリ秒単位で、マイクロ秒レベルの精度が必要な場合は performance.measure の方が適しています。あくまで「おおよその感覚をつかむ」用途と割り切って使うといいです。

条件付きでログを出す — .assert

「この値が想定外のときだけログを出したい」というケースに使えます。

console.assert(value > 0, '値は正の数のはずです', value);

第一引数が false または falsy のときだけ出力されます。true のときは何も起きません。
if で囲まなくてよいぶんコードがすっきりしますし、「正常系では何も出ない」という意図が読み取りやすくなります。デバッグ用のガードとして便利です。
ひとつ気をつけたいのは、.assert は例外を投げないという点です。アサーションが失敗してもプログラムは止まらず、コンソールにメッセージが出るだけです。「失敗したら処理を止めたい」のであれば、通常の throw を使う必要があります。あくまでデバッグ時の確認用と考えておくといいです。

出力をリセットする — .clear

開発中にコンソールが散らかってきたとき、ブラウザの「コンソールをクリア」ボタンを押す代わりにコードから呼べます。

console.clear();

ページロード直後や特定の操作後に自動でクリアしたいときにも使えます。
ただし、「Preserve log」がオンになっているとクリアされません。Chrome DevTools でページ遷移をまたいでログを追っているときにオンにしていることがあるので、思ったように動かない場合は確認してみてください。また Node.js 環境では .clear() がターミナルのクリアコマンドとして機能するため、CI などで実行中のスクリプトに混入していると出力が消えて困ることがあります。

まとめ

今回紹介したメソッドと、注意点をまとめて終わりにしたいと思います。
.warn / .error : 重要度別に色分けしてログを出す 本番環境に残りやすいので注意
.table : 配列・オブジェクトを表形式で確認 ネストが深いと崩れる
.group / .groupCollapsed : 関連ログをまとめて折りたたむ .groupEnd() 忘れに注意
.time / .timeEnd : 処理時間を手軽に計測 ラベルの重複に注意
.assert : 条件が falsy のときだけログを出す 例外は投げない
.clear : コンソールをリセット Preserve log がオンだと効かない
console.log : ですべて代用できなくはないですが、用途に合ったメソッドを使うとデバッグのノイズが減ります。