JavaScript　コンソールを使ったデバッグ方法｜ログの出力やオブジェクト表示、実行時間計測など

JavaScriptにおけるデバッグ方法の一つ、コンソールを使ったデバッグについて解説します。ログの出力やオブジェクト表示、実行時間計測など、さまざまな使い方ができます。

コンソールを使ったデバッグではどのようなことができますか？

ログの出力やオブジェクト表示、実行時間計測などができます。

コンソールにログを出力する方法

JavaScriptでは、consoleオブジェクトを使ってコンソールにログを出力することができます。以下では、consoleオブジェクトの主要なメソッドを説明します。

通常出力：console.log()

console.log()メソッドは、引数として渡された値を文字列としてコンソールに出力します。例えば、以下のように使うことができます。

console.log('Hello, world!');

この場合、コンソールには「Hello, world!」という文字列が表示されます。

情報出力：console.info()

console.info()メソッドは、引数として渡された値を情報としてコンソールに出力します。例えば、以下のように使うことができます。

console.info('This is an information message.');

この場合、コンソールには「This is an information message.」という文字列が表示されます。console.log()メソッドと同じように、引数には文字列だけでなく、オブジェクトや配列なども渡すことができます。

警告出力：console.warn()

console.warn()メソッドは、引数として渡された値を警告としてコンソールに出力します。例えば、以下のように使うことができます。

console.warn('This is a warning message.');

この場合、コンソールには「This is a warning message.」という文字列が、黄色い背景で表示されます。

エラー出力：console.error()

console.error()メソッドは、引数として渡された値をエラーとしてコンソールに出力します。例えば、以下のように使うことができます。

console.error('This is an error message.');

この場合、コンソールには「This is an error message.」という文字列が、赤い背景で表示されます。

デバッグ情報出力：console.debug()

console.debug()メソッドは、引数として渡された値をデバッグ情報としてコンソールに出力します。console.info()メソッドと似ていますが、console.debug()メソッドは、ブラウザによっては無視される場合があります。

コンソールにオブジェクトを表示する方法

JavaScriptでは、consoleオブジェクトを使ってオブジェクトをコンソールに出力することができます。以下では、consoleオブジェクトを使ったオブジェクトの表示方法について説明します。

ディレクトリ形式：console.dir()

console.dir()メソッドは、引数として渡されたオブジェクトのプロパティやメソッドをディレクトリ形式で表示します。例えば、以下のように使うことができます。

const obj = {name: 'John', age: 25, gender: 'Male'};
console.dir(obj);

この場合、コンソールには以下のように表示されます。

Object
  age: 25
  gender: "Male"
  name: "John"
  __proto__: Object

XML形式：console.dirxml()

console.dirxml()メソッドは、引数として渡されたオブジェクトをXML形式で表示します。例えば、以下のように使うことができます。

console.dirxml(document.body);

この場合、コンソールにはbody要素のXMLが表示されます。

テーブル形式：console.table()

console.table()メソッドは、引数として渡されたオブジェクトのプロパティと値を表形式でコンソールに出力します。例えば、以下のように使うことができます。

console.table({name: 'John', age: 25, gender: 'Male'});

コードの実行時間を計測する方法

JavaScriptでは、コードの実行時間を計測することができます。以下では、コードの実行時間を計測する方法について説明します。

console.time() / console.timeEnd()

console.time()メソッドとconsole.timeEnd()メソッドを使うことで、コードの実行時間を計測することができます。以下のように使うことができます。

console.time('label');
// 計測したいコード
console.timeEnd('label');

上記の例では、’label’というラベル名で計測を開始し、同じラベル名を指定して計測を終了しています。console.time()メソッドを呼び出した時点で計測が開始され、console.timeEnd()メソッドを呼び出した時点で計測が終了します。計測結果は、コンソールにラベル名と共に表示されます。

performance.now()

performance.now()メソッドは、DOMHighResTimeStampオブジェクトを返し、現在の時刻を表します。これを利用して、以下のようにコードの実行時間を計測することができます。

const t0 = performance.now();
// 計測したいコード
const t1 = performance.now();
console.log('処理時間：', (t1 - t0).toFixed(2), 'ms');

上記の例では、performance.now()メソッドを使って開始時刻と終了時刻を取得し、その差分を計算して処理時間を求めています。toFixed()メソッドを使って小数点以下の桁数を指定しています。

条件に応じたログの出力方法

JavaScriptでは、ある条件が満たされた場合にのみログを出力することができます。以下では、条件に応じたログの出力方法について説明します。

条件がfalseの場合にログを出力する：console.assert()

　console.assert()メソッドを使うことで、条件式がfalseの場合にのみログを出力することができます。以下のように使うことができます。

console.assert(condition, message);

上記の例では、conditionがfalseの場合にmessageをログに出力します。conditionがtrueの場合は何もしません。このメソッドを使うことで、ある条件が満たされているかどうかを簡単にチェックすることができます。

if文を使った条件分岐

if文を使って条件分岐を行うことで、条件に応じたログの出力ができます。以下のようなコードを書くことができます。

if (condition) {
  console.log(message);
}

上記の例では、conditionがtrueの場合にのみ、messageをログに出力します。conditionがfalseの場合はログを出力しません。

実行スタックトレースの出力方法

JavaScriptでは、実行中のコードのスタックトレースを出力することができます。スタックトレースは、コードが実行される順番を示すもので、どの関数がどの関数から呼ばれたかなどを確認することができます。以下では、実行スタックトレースの出力方法について説明します。

スタックトレースを出力：console.trace()

console.trace()メソッドを使うことで、スタックトレースを出力することができます。以下のように使うことができます。

console.trace();

上記の例では、現在の関数の呼び出し元から順にスタックトレースを出力します。このメソッドを使うことで、どの関数から呼ばれたかを確認することができます。

Errorオブジェクトを使ったスタックトレースの出力

Errorオブジェクトを使って、スタックトレースを出力することもできます。以下のように使うことができます。

try {
  // some code here
} catch(error) {
  console.error(error.stack);
}

上記の例では、エラーが発生した場合に、エラーオブジェクトのstackプロパティをログに出力します。これにより、スタックトレースを出力することができます。

特定のラベルに関する回数をカウントする

console.count()メソッドは、特定のラベルに関する回数をカウントすることができるメソッドです。このメソッドを使うことで、特定のコードが何回呼ばれたかをカウントすることができます。以下では、console.count()メソッドの使い方について説明します。

特定のラベルに関する回数をカウント：console.count()

console.count()メソッドを使うことで、特定のラベルに関する回数をカウントすることができます。以下のように使うことができます。

console.count('label');

上記の例では、labelというラベルに関する回数をカウントします。このメソッドを複数回呼び出すことで、回数をカウントすることができます。

ラベルを指定しない場合

console.count()メソッドをラベルを指定せずに呼び出した場合、ラベルにはデフォルトで”default”が使われます。以下のように使うことができます。

console.count();
console.count();
console.count();

上記の例では、”default”というラベルに関する回数をカウントします。

カウントのリセット

console.count()メソッドを使ってカウントした結果は、ブラウザを再読み込みするか、console.countReset()メソッドを呼び出すことでリセットすることができます。以下のように使うことができます。

console.countReset('label');

上記の例では、labelというラベルに関するカウントをリセットします。ラベルを指定しない場合、デフォルトのラベルである”default”がリセットされます。

これらの方法を使うことで、特定のコードの呼び出し回数をカウントすることができます。console.count()メソッドを使って、どの部分が頻繁に呼ばれているかを把握することができます。

グループ化されたログを出力する

console.group()メソッドは、グループ化されたログを出力することができるメソッドです。このメソッドを使うことで、ログを階層的にグループ化して表示することができます。以下では、console.group()メソッドの使い方について説明します。

グループを作製する：console.group()

console.group()メソッドを使うことで、グループを作成することができます。以下のように使うことができます。

console.group('label');

上記の例では、labelというラベルでグループを作成します。このメソッドを呼び出した後に、console.log()メソッドでログを出力すると、グループに含まれるログとして表示されます。

グループのネスト

console.group()メソッドをネストすることで、グループを階層的に作成することができます。以下のように使うことができます。

console.group('parent');
console.log('parent log');
console.group('child');
console.log('child log');
console.groupEnd();
console.groupEnd();

上記の例では、parentというラベルでグループを作成し、その中にparent logというログを出力します。次にchildというラベルでグループを作成し、その中にchild logというログを出力します。最後にconsole.groupEnd()メソッドを2回呼び出すことで、グループを閉じます。

グループの折りたたみ

console.groupCollapsed()メソッドを使うことで、グループを折りたたんで表示することができます。以下のように使うことができます。

console.groupCollapsed('label');

上記の例では、labelというラベルでグループを作成し、折りたたんで表示します。グループをクリックすることで、グループを展開することができます。

これらの方法を使うことで、ログを階層的にグループ化して表示することができます。console.group()メソッドを使って、コードの実行フローをわかりやすく表示することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

JavaScriptにおけるデバッグ方法の一つ、コンソールを使ったデバッグについて解説しました。

ログを出力するだけでなく、オブジェクトやコードの実行時間、条件に応じたログ、実行スタックトレースなど、さまざまな情報をコンソールから得ることができるのは便利ですね！

コンソールを活用することで、JavaScriptのデバッグがより簡単になります。コンソールでログを出力したり、オブジェクトを表示したり、コードの実行時間を計測したり、条件に応じたログを出力したり、実行スタックトレースを出力したり、カウントしたり、ログをグループ化することができます。これらの機能をうまく使って、効率的なデバッグを行いましょう。