console メソッド一覧（warn・error・table・group）｜JavaScript

console には log 以外にも多くのメソッドがあります。状況に応じて使い分けることで、デバッグ効率が大幅に向上します。

ログレベル別のメソッド

console.log('通常のログ');
console.info('情報');
console.warn('警告');
console.error('エラー');
console.debug('デバッグ用');

ブラウザの DevTools ではログレベルでフィルタリングできるため、適切なメソッドを使い分けると情報を探しやすくなります。warn は黄色、error は赤色で表示されるのも視認性の面で便利です。

console.table でデータを表形式で表示

配列やオブジェクトを表形式で見やすく表示できます。

const users = [
  { name: 'Alice', age: 30, city: 'Tokyo' },
  { name: 'Bob', age: 25, city: 'Osaka' },
  { name: 'Charlie', age: 35, city: 'Nagoya' }
];

console.table(users);

大量のデータを比較するときに非常に便利です。

console.group でログをグループ化

関連するログをまとめて折りたたみ可能なグループにできます。

console.group('ユーザー情報');
console.log('名前: Alice');
console.log('年齢: 30');
console.log('都市: Tokyo');
console.groupEnd();

// 最初から折りたたんだ状態にする
console.groupCollapsed('詳細データ');
console.log('データ1');
console.log('データ2');
console.groupEnd();

ネストも可能なので、階層構造のデータを整理して表示できます。

console.time で処理時間を計測

処理にかかった時間を簡単に計測できます。

console.time('ループ処理');

let sum = 0;
for (let i = 0; i &lt; 1000000; i++) {
  sum += i;
}

console.timeEnd('ループ処理');
// ループ処理: 12.345ms

ラベルを指定することで、複数の計測を同時に行えます。

console.time('処理A');
console.time('処理B');

doProcessA();
console.timeEnd('処理A');

doProcessB();
console.timeEnd('処理B');

console.count で呼び出し回数をカウント

関数やブロックが何回実行されたかを数えられます。

function processItem(item) {
  console.count('processItem 呼び出し');
  // 処理
}

processItem('a'); // processItem 呼び出し: 1
processItem('b'); // processItem 呼び出し: 2
processItem('c'); // processItem 呼び出し: 3

console.countReset('processItem 呼び出し'); // カウントをリセット

console.assert で条件付きエラー表示

条件が false のときだけエラーを出力します。

const age = 15;
console.assert(age >= 18, '年齢が18歳未満です');
// Assertion failed: 年齢が18歳未満です

const score = 80;
console.assert(score >= 60, '合格点に達していません');
// （条件を満たすので何も出力されない）

テスト的な確認を簡易的に行いたいときに便利です。

console.trace でスタックトレースを表示

現在の呼び出し元を追跡できます。

function a() { b(); }
function b() { c(); }
function c() { console.trace('ここに到達'); }

a();
// ここに到達
//     at c (script.js:3)
//     at b (script.js:2)
//     at a (script.js:1)

「この関数はどこから呼ばれているのか」を調べたいときに使います。

console.dir でオブジェクトの詳細を表示

DOM 要素などをオブジェクトとして詳細表示できます。

const element = document.querySelector('body');
console.log(element);  // HTML として表示
console.dir(element);  // オブジェクトとして表示

console.clear でコンソールをクリア

console.clear();

ブラウザによっては「Console was cleared」というメッセージが表示されます。

メソッド一覧

メソッド	用途
log / info	通常のログ出力
warn	警告（黄色表示）
error	エラー（赤色表示）
table	表形式で表示
group / groupEnd	ログのグループ化
time / timeEnd	処理時間の計測
count / countReset	呼び出し回数のカウント
assert	条件が false のときだけ出力
trace	スタックトレースを表示
dir	オブジェクト詳細表示
clear	コンソールをクリア