JavaScriptでconsole.logを使用してませんか？
はじめに
Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。
console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。
通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。
console.log
ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します
console.log('エラーです！！')
出力
console.warn
警告メッセージを表示する際に使用されます。メッセージは通常、黄色の背景や黄色のアイコンなどの警告を示す色でハイライトされることが多いです。
console.warn('エラーです！！')
出力
console.error
エラーメッセージをコンソール上に赤色で表示するために使用されます。エラーに関する情報を強調して表示することで、開発者が問題を特定しやすくなります。
console.error('エラーです！！')
出力
console.time
コードの実行にどれくらいの時間がかかったかを知りたい場合、console.time()を使用できます。
console.time()とconsole.timeEnd()に一意の名前を付けると、その間に書かれたコードの実行時間が表示されます。
console.time("タイマー");
for (i = 0; i < 100000; i++) {}
console.timeEnd("タイマー");
出力
console.trace
スタックトレースの出力にも対応したいときは、console.trace()を使用します。これは関数の呼び出し経路を表示するものです。
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
出力
console.group
複数のコンソールメッセージを視覚的にグループ化するために使用できます。これは、関連するログメッセージを一緒に表示して、デバッグ情報を整理しやすくするために役立ちます
console.group("level 1");
console.log("レベル1です");
console.group("level 2");
console.log("レベル2です");
console.groupEnd();
console.log("レベル2を閉じます");
console.groupEnd();
console.log("レベル1を閉じます");
出力
console.table
オブジェクトをコンソールで表示すると、見にくく感じる方もいると思います。
console.table()を使用すると。オブジェクトや配列をテーブル形式でコンソールに表示することができます。
const person1 = { name: "田中", age: 20, height: 170 };
const person2 = { name: "山田", age: 30, height: 180 };
console.table({ person1, person2 });
出力
console.logでcssを使う
console.log()のみですが、textにcssでスタイルをつけることができます。
console.log(
"%c エラーです！！",
"color: red; background-color: lightblue; border: 1px solid blue"
);
出力
これを活用すると、非常に目立つログを作ることができます。
最後に
ここまで記事を読んでいただきありがとうございます。
他のメソッドやそれぞれのメソッドの詳しい使い方はこちらをご覧ください。
追記
個人開発のプロダクトを投稿できるサービス「DevHaunt」を運営しています。
新しいプロダクトを見つけたい方・自分のプロダクトにフィードバックが欲しい方のためのサイトです！是非覗いてみてください
Discussion