1. console.table() - データをテーブル表示
配列やオブジェクトを見やすい表形式で表示できます。APIのレスポンスデータなどを確認するときに超便利です。
const users = [
{ name: '田中', age: 25, role: 'エンジニア' },
{ name: '佐藤', age: 30, role: 'デザイナー' },
{ name: '鈴木', age: 28, role: 'マネージャー' }
];
console.table(users);
これを実行すると、ブラウザのコンソールに見やすい表が表示されます。
特定のカラムだけ表示したい場合は、第2引数に配列で指定できます。
// nameカラムだけ表示
console.table(users, ['name']);
2. console.time() / console.timeEnd() - 処理時間を計測
パフォーマンスチェックに最適です。処理の開始時にconsole.time()、終了時にconsole.timeEnd()を呼ぶだけで、経過時間がミリ秒単位で表示されます。
console.time('ループ処理');
for (let i = 0; i < 1000000; i++) {
// 何か重い処理
}
console.timeEnd('ループ処理');
// 出力例: ループ処理: 15.234ms
ラベル名を指定することで、同時に最大10,000個のタイマーを実行できます。複数の処理を並行して計測したいときに便利です。
途中経過を知りたい場合は、console.timeLog()を使うと、タイマーを止めずに現在の経過時間を確認できます。
console.time('API呼び出し');
// 処理1
console.timeLog('API呼び出し', 'データ取得完了');
// 処理2
console.timeEnd('API呼び出し');
3. console.group() / console.groupEnd() - ログをグループ化
関連するログをまとめて折りたたみ可能なグループにできます。ネストした構造も表現できるので、複雑なデバッグログが見やすくなります。
console.group('ユーザー情報');
console.log('名前: 山田太郎');
console.log('年齢: 25歳');
console.group('住所');
console.log('都道府県: 東京都');
console.log('市区町村: 渋谷区');
console.groupEnd(); // 住所グループ終了
console.groupEnd(); // ユーザー情報グループ終了
デフォルトで折りたたんでおきたい場合は、console.groupCollapsed()を使いましょう。
4. console.count() / console.countReset() - 呼び出し回数をカウント
関数が何回呼ばれたかを簡単にカウントできます。ループやイベントハンドラのデバッグに重宝します。
function handleClick() {
console.count('クリック回数');
}
// クリックイベントが発生するたび
// 出力例: クリック回数: 1
// 出力例: クリック回数: 2
// 出力例: クリック回数: 3
カウンターをリセットしたい場合はconsole.countReset()を使います。
console.countReset('クリック回数');
5. console.trace() - スタックトレースを表示
「この関数、どこから呼ばれてるんだっけ?」と思ったときに便利です。呼び出し元の関数を順番にたどることができます。
function レベル3() {
console.trace('ここに到達した経路');
}
function レベル2() {
レベル3();
}
function レベル1() {
レベル2();
}
レベル1();
深くネストした関数やコールバック地獄のデバッグで威力を発揮します。
6. console.assert() - 条件付きログ
条件がfalseの場合のみエラーメッセージを表示します。想定外の値が来たときだけログを出したいケースで便利です。
const age = 15;
console.assert(age >= 18, '年齢が18歳未満です', { age });
// 条件がfalseなので、エラーメッセージが表示される
if文を書かなくても、アサーションチェックが簡単にできます。
7. console.dir() - オブジェクトの詳細を表示
console.log()と似ていますが、オブジェクトのプロパティを対話的に展開できる形式で表示します。DOM要素などの複雑なオブジェクトを調べるときに特に便利です。
const element = document.querySelector('body');
console.log(element); // HTML表現で表示
console.dir(element); // JavaScriptオブジェクトとして表示
console.log()はHTMLとして表示しますが、console.dir()はオブジェクトのプロパティ一覧として表示されるので、使い分けると効率的です。
8. console.warn() / console.error() - 警告とエラー
通常のログと区別したいときに使います。ブラウザのコンソールで色分けされて表示されるので、重要なメッセージが埋もれません。
console.warn('この機能は非推奨です');
console.error('データの取得に失敗しました');
-
console.warn(): 黄色の警告アイコン付きで表示 -
console.error(): 赤いエラーアイコン付きで表示
コンソールのフィルタ機能で、エラーや警告だけを表示することもできます。
9. console.clear() - コンソールをクリア
コンソールがログで溢れかえってきたら、サクッとクリアしましょう。
console.clear();
デバッグセッションの区切りをつけたいときや、新しいテストを始める前にコンソールをリセットしたいときに便利です。
10. CSSでログをスタイリング
実は、console.log()の出力にCSSでスタイルを適用できます。%cという特殊な記法を使います。
console.log(
'%c重要なメッセージ',
'color: white; background-color: red; font-size: 20px; padding: 10px; border-radius: 5px;'
);
console.log(
'%c成功しました！ %c処理が完了しました',
'color: green; font-weight: bold;',
'color: blue;'
);
複数の%cを使えば、一つのログの中で部分的にスタイルを変更できます。目立たせたいログや、ブランディング的な遊び心を入れたいときに使えます（本番環境では控えめにしましょう）。
おまけ: console.debug() / console.info()
基本的にはconsole.log()と同じように動作しますが、ログレベルが異なります。
-
console.debug(): デバッグレベル（本番環境では非表示にできる） -
console.info(): 情報レベル（青いアイコン付きで表示されることも）
ブラウザの開発者ツールでログレベルでフィルタリングできるので、用途に応じて使い分けると便利です。
console.debug('デバッグ情報: 変数の値を確認');
console.info('情報: APIから200レスポンスを受信');
console.log('通常のログ');
console.warn('警告: キャッシュが古い可能性があります');
console.error('エラー: 接続に失敗しました');
注意点として、console.debug()はChromeではデフォルトで非表示になっているため、「Verbose」レベルを有効にする必要があります。
まとめ
consoleオブジェクトには、こんなにたくさんの便利なメソッドがあります。
| メソッド | 用途 |
|---|---|
console.table() |
配列やオブジェクトを表形式で表示 |
console.time() |
処理時間の計測開始 |
console.timeEnd() |
処理時間の計測終了 |
console.group() |
ログのグループ化 |
console.count() |
呼び出し回数のカウント |
console.trace() |
スタックトレースの表示 |
console.assert() |
条件付きエラー表示 |
console.dir() |
オブジェクトの詳細表示 |
console.warn() |
警告メッセージ |
console.error() |
エラーメッセージ |
console.clear() |
コンソールのクリア |
私のように、いつもconsole.log()ばかり使っている方は、ぜひこれらのメソッドも試してみてください。デバッグ作業が格段に楽になりますよ！