はじめに
今回は、console.log()以外のconsoleオブジェクトの使い方について解説します。
一般的には、console.log() がよく使われますが、他にも様々なメソッドが用意されています。
今回は、そのなかで有用なものを重点的に紹介します。
info / warn / error
ログレベルを変更して出力することができます。
console.info('info log');
console.warn('warn log');
console.error('error log');
dir
オブジェクトを見やすく表示することができます。
const obj = { a: 1, b: 2, c: 3 };
console.dir(obj);
table
オブジェクトをテーブル形式で表示することができます。
配列とオブジェクトでそれぞれ表示が異なります。
const arr = [
{ a: 1, b: 2, c: 3 },
{ a: 4, b: 5, c: 6 },
{ a: 7, b: 8, c: 9 },
];
console.table(arr);
const user = { name: 'John', age: 20, country: 'USA' };
console.table(user);
assert
第１引数の条件式が false の場合にエラーメッセージを出力します。
console.assert(1 === 2, '不正解です');
console.assert(1 === 1, '不正解です');
第１引数の条件式がtrueのときは実行がスキップされます。
group/groupEnd
グループ化して表示することができます。
console.groupでグループを開始し、console.groupEndでグループを終了します。
console.group('グループ１');
console.log('ログ１');
console.log('ログ２');
console.groupEnd();
console.group('グループ２');
console.log('ログ３');
console.log('ログ４');
console.groupEnd();
groupCollapsed
上記のgroupと同様の動きですが、グループを閉じた状態で表示します。
console.groupCollapsed('グループ１');
console.log('ログ１');
console.log('ログ２');
console.groupEnd();
clear
コンソール画面をクリアします。
console.clear();
time / timeEnd / timeLog
処理時間を計測することができます。
timeLogは、timeEndと同じように処理時間を表示しますが、タイマーはリセットされません。
console.time('タイマー');
for (let i = 0; i < 1000000; i++) {
// 処理
}
console.timeEnd('タイマー');
console.time('タイマー');
for (let i = 0; i < 10000000; i++) {
if (i % 5000000 === 0) {
console.timeLog('タイマー');
}
}
console.timeEnd('タイマー');
そのほかのメソッド
- trace: スタックトレースを表示
- count: ログが何回出力されたかを表示
- countReset: countのカウントをリセットする
- dirxml: XML/HTML要素を表示
他にもあるようですが、これ以外は非推奨なようなので掲載は控えます。
おわりに
今回は、consoleオブジェクトにあるconsole.log() 以外のメソッドについて解説しました。
デバッグ時には、これらのメソッドを使い分けることで、より効率的にデバッグを行うことができると思うので、ぜひ活用してみてください！
最後まで読んでいただき、ありがとうございました！