はじめに

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 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。