今回は、JavaScriptのデバッグする際に多用するConsoleについて学習していきましょう。
Consoleオブジェクトは、ブラウザのデバッグツール上に引数で指定した値を出力します。
JavaScriptの開発をしている時は、ほとんどの方がconsole.log を使用してログを出力しているでしょう。
ただ、Consoleオブジェクトには他にも便利なメソッドがたくさんあるのでご紹介します。
ぜひ、console.log 以外のメソッドをマスターしてみてください＾＾
console.log()
まずは基本的なconsole.log
console.log は引数に指定した値の情報をメッセージとして出力します。
引数には、string, number, array, object, boolean など、どのような値でも渡すことができます。
console.log('test');
console.log(10);
console.log(true);
console.log(undefined);
console.log([1, 2, 3]);
console.log({name: 'tanaka'});
また出力したい値が複数の場合は、console.logの引数を複数指定することも可能です。
console.log(1, 2, 3);
初学者の方はconsole.log(1 + ' ' + 2 + ' ' + 3) のように + で文字列を連結して出力しようとする方も多いですが、
カンマ区切りで、複数のログを一度に出力できるので、ぜひ覚えておいてください。
文字列置換もできる
console.log("Hello, %s. You've called me %d times.", "Bob", 3);
このように文字列置換もできます。
console.info()
こちらもconsole.log と同様に引数で指定した値を情報メッセージとして出力します。
使い道はconsole.log とほとんど同じですが、console.info を使用するとfirefox では “i” のアイコンを表示します。
console.error()
こちらは赤文字で強調してログを出力することができます。一般的にはエラーメッセージを出力する際に使用されます。
console.error('error')
console.warn()
こちらは黄色の文字で強調してログを出力することができます。
console.warn('警告');
console.clear()
コンソールのメッセージを全てクリアすることができます。
クリアすると、google chrom では「Console was cleared」とメッセージが表示されます。
console.time() / console.timeEnd()
こちらのメソッドを使用すると、処理時間の計測をすることができます。
関数など処理が重い時に時間を計測して、遅い箇所を特定する時などに使用します。
timeEnd を使用すると、timeからの処理時間をミリ秒単位で表示してくれます。
const greet = () => {
console.log('hello')
}
console.time()
greet()
console.timeEnd()
console.table()
こちらを使用すると、配列またはオブジェクトをテーブル形式で分かりやすく表示してくれます。
console.count()
こちらは、count() が呼び出された回数を表示してくれます
console.count() console.count() console.count()
表示するキーは、デフォルトでdefualt 表記なので、変更したい場合は引数に指定します
const countUp = () => {
console.count('countUp call')
}
for(let i = 0; i < 3; i++) {
countUp();
}
他にもConsoleオブジェクトのメソッドはたくさんありますが、ひとまずこのあたりをおさえておくだけでも、周りの人より少し詳しくなれると思います。
ぜひマスターしてみてください＾＾
