概要
フロントエンドエンジニアなら必ず console.log() メソッドを使用したことがあると思います。
console APIにlogの他にもいくつかデバッグを助けるAPIがあるので紹介します。
Tables
console.table() はオブジェクトや配列を表形式で表示してくれます。
console.table({
'Time Stamp': new Date().getTime(),
'OS': navigator['platform'],
'Browser': navigator['appCodeName'],
'Language': navigator['language'],
});
console.table(["hoge","fugo","piyo"])
Groups
console.group()を使用すると、コンソールログを折りたたみ可能な表示でグループ化できます。
console.groupCollapsedを使用すると、コンソールログをデフォルトで折りたたまれた形で出力します。
console.group('URL Info');
console.log('Protocol', window.location.protocol);
console.log('Host', window.origin);
console.log('Path', window.location.pathname);
console.groupCollapsed('Meta Info');
console.log('Date Fetched', new Date().getTime());
console.log('OS', navigator['platform']);
console.log('Browser', navigator['appCodeName']);
console.log('Language', navigator['language']);
console.groupEnd();
console.groupEnd();
Styled Logs
colorやfont, backgroundなどのcssが console.log() 中で使用することができます。
console.log("%c🐯", "background: #1cce69; font-size:5rem; border-radius: 5px; padding: 100px; ")
Time
実行時間の計測も可能です。
console.time()でラベルを渡しタイマーをスタートさせ、 console.timeEnd()に同じラベルを渡すことでタイマーを終了させることでその間の時間を計測することができます。
console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
output += i;
}
console.timeEnd("concatenation");
Assert
console.assert()は、エラーが発生した時や、特定の条件下のみコンソールにログを出す場合に有効です。
第一引数の条件がtrueである場合は、ログが表示されません。
const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
console.log(`the # is ${num}`);
console.assert(num % 2 === 0, { num }, errorMsg);
}
Count
console.count()を使用することで、同じログメッセージの出力回数をカウントすることができます。
引数に何も指定しない場合は、default: {count}と出力されます。
console.countReset()でカウントをリセットすることができます。
const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
console.count("hoge");
});
Trace
console.trace()を使用すれば、スタックトレースが出力され、特定のタイミングでどのメソッドがコールされたかがわかります。
ネストされたメソッドのデバッグ等に有効です。
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
Dir
console.dir()は深くネストしたオブジェクトをデバッグする際に有効です。展開可能なツリー表示フォーマットしてくれます。
const hoge = {
'Time Stamp': new Date().getTime(),
'OS': navigator['platform'],
'Browser': navigator['appCodeName'],
'Language': navigator['language'],
}
console.dir(hoge)
参考