はじめに
JavaScript のconsole.logはよく使われるデバッグ手法ですが、consoleオブジェクトには他にも便利なメソッドが多数あります。本記事では、開発に役立つログ出力の方法を紹介します。
console.table()
配列・オブジェクトを表形式で出力できます。
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
];
console.table(users);
特定のプロパティのみ出力したい場合
console.table(users, ["id", "name"]);
console.dir()
オブジェクトのプロパティやメソッドをツリー構造で表示するのに便利です。
console.dir(window);
console.log との違いは Element を出力してみるとわかりやすいです。
const main = document.querySelector("#main");
console.log(main);
console.dir(main);
▼ console.logで出力した場合（HTML 形式のツリー）
▼ console.dirで出力した場合（オブジェクトツリー）
console.logでは HTML として出力されるのに対し、console.dirを使うとオブジェクトの詳細な構造を確認できるため、DOM 要素のデバッグに便利です。
console.group() / console.groupEnd()
ログをグループ化して整理できます。
group メソッドを呼び出してから groupEnd メソッドを呼び出すまでのログをグループ化して整理できます。入れ子にすることも可能です。
console.group("ユーザー情報");
console.log("ID: 1");
console.log("名前: Alice");
console.group("詳細情報");
console.log("年齢: 25");
console.log("職業:エンジニア");
console.groupEnd();
console.groupEnd();
また、console.groupCollapsed()を使うと、デフォルトで閉じた状態になります。
console.groupCollapsed("非表示のグループ");
console.log("このメッセージは最初は隠れています");
console.groupEnd();
console.trace()
関数の呼び出し元（スタックトレース）を出力できます。
「関数 A の中で別の関数 B が呼び出されている」など、複数の関数が組み合わさっている時の動作確認に便利です。
function funcA() {
funcB();
}
function funcB() {
console.trace("関数の呼び出し元を追跡");
}
funcA();
console.group と console.trace の組み合わせ
console.groupとconsole.traceを組み合わせると、呼び出し履歴を整理しながらデバッグできます。
function startProcess() {
console.group("処理開始");
stepOne();
stepTwo();
console.groupEnd();
}
function stepOne() {
console.group("ステップ1");
console.trace("ステップ1の呼び出し元");
console.groupEnd();
}
function stepTwo() {
console.group("ステップ2");
console.trace("ステップ2の呼び出し元");
console.groupEnd();
}
console.time() / console.timeEnd()
time メソッドの呼び出し～ timeEnd メソッドの呼び出しまでの実行時間を計測できます。
console.time("処理時間");
for (let i = 0; i < 1000000; i++) {} // 何らかの処理
console.timeEnd("処理時間");
console.clear()
出力したログをクリアできます。
setIntervalなどで定期的にログを更新する際に、過去のログを消して最新の情報だけを表示させたい時に便利です。
setInterval(() => {
console.clear();
console.log("現在の時刻:", new Date().toLocaleTimeString());
}, 1000);
番外：JSON.stringify と console.log
オブジェクトをログ出力する際、JSON.stringify を使うと見やすくなります。
const obj = { name: "Alice", age: 25 };
console.log(JSON.stringify(obj));
まとめ
| メソッド | 説明 |
|---|---|
console.log |
通常のログ出力 |
console.table |
配列・オブジェクトを表形式で表示 |
console.dir |
オブジェクトの詳細情報をツリー構造で表示 |
console.group / console.groupCollapsed / console.groupEnd
|
ログをグループ化して整理（ネスト可） |
console.trace |
関数の呼び出し元（スタックトレース）を出力 |
console.time / console.timeEnd
|
実行時間を計測 |
console.clear |
コンソールの出力をクリア |
JSON.stringify |
オブジェクトをフォーマットしてログ出力 |
参考
オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。