JavaScriptでのデバッグ:ブラウザコンソールへのロギング

Webブラウザコンソールは、フロントエンドアプリケーションのデバッグに最も広く使用されているツールの1つです。 Console APIは、開発者にエラーに取り組み、メッセージをログに記録する機能を提供します。

console.log()はおそらくコンソールAPIで最も一般的に使用されるメソッドですが、ワークフローで使用できる他のメソッドもあります。このガイドでは、デバッグワークフローを改善するために使用できるさまざまなWebブラウザコンソールの方法を示します。

ロギングが重要なのはなぜですか?

Webブラウザコンソールへのログ記録は、フロントエンドまたはJavaScriptベースのアプリケーションをデバッグするための最良の方法の1つです。

関連:学習する価値のある6つのJavaScriptフレームワーク

最新のWebブラウザのほとんどはコンソールAPIをサポートしているため、開発者はすぐに利用できます。コンソールオブジェクトは、ブラウザのデバッグコンソールへのアクセスを提供する役割を果たします。実装はブラウザによって異なる場合がありますが、ほとんどのメソッドはすべての最新のブラウザで機能します。

ヒント:ブラウザコンソールは、このガイドで説明されているすべてのコードを実行できます。キーボードのF12を押して、ChromeまたはFirefoxでブラウザ開発者のツールを開きます。

文字列メッセージのログ

最も一般的なコンソールメソッドの1つは、 console.log()です。文字列メッセージまたは何らかの値をWebコンソールに出力するだけです。単純な値または文字列メッセージの場合、 console.log()メソッドがおそらく使用するのに最適なオプションです。

Hello Worldメッセージを出力するには、以下を使用できます。

 console.log(`Hello World`);

console.log()メソッドのもう1つの特別な機能は、DOM要素の出力またはWebサイトの一部の構造を出力する機能です。たとえば、body要素の構造を出力し、その中のすべてが以下を使用します。

 console.log(document.body)

出力は、HTMLツリーとしてのDOM要素のコレクションです。

インタラクティブなJavaScriptオブジェクトのロギング

console.dir()メソッドは、JavaScriptオブジェクトのインタラクティブなプロパティをログに記録するために使用されます。たとえば、これを使用してWebページのDOM要素を表示できます。

console.dir()メソッドの一般的な出力は、JSON形式で指定されたJavaScriptオブジェクトのすべてのプロパティで構成されます。以下の方法を使用して、HTMLページの本文にあるすべての要素のプロパティを出力します。

 console.dir(document.body)

ブラウザでのコンソールディレクトリの出力

式の評価

ユニットテストのassertメソッドに精通しているかもしれません。console.assert()メソッドも同様に機能します。 console.assert()メソッドを使用して、式または条件を評価します。

assertメソッドが失敗すると、コンソールはエラーメッセージを出力します。それ以外の場合は、何も出力しません。以下のコードを使用して、人の年齢が18歳を超えているかどうかを評価します。

 let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = "You have to be older than 18 years of age";

console.assert( yourAge > ageLimit, assertFailMessage);

上記のアサートは失敗し、それに応じてエラーメッセージが出力されます。

コンソール出力の主張年齢

テーブルへのデータの記録

console.table()メソッドを使用して、データを表形式で表示します。表形式で表示するのに適した候補には、配列またはオブジェクトデータが含まれます。

:Firefoxなどの一部のブラウザーには、 console.table()メソッドで表示できる最大1,000行の制限があります。

次の車のオブジェクトの配列があると仮定します。

 let cars = [
{"color":"purple", "type":"minivan", "registration": new Date('2021-04-05')},
{"color": "red", "type":"minivan", "registration": new Date ('2021-06-10')}
]

以下の方法を使用して、上記の配列をテーブルに表示できます。

 console.table(cars);

表形式のブラウザコンソール出力

カテゴリ別のメッセージのログ

Webブラウザコンソールメッセージは、主にエラー、警告、情報の3つのグループに分類されます。

エラー

console.error()メソッドを使用してコンソールにエラーメッセージを具体的に出力するために、エラー関連のメッセージは赤いフォントで表示されます。

 console.error('error message');

警告

警告を出力するには、以下を使用します。ほとんどのシナリオと同様に、警告メッセージはオレンジ色で表示されます。

 console.warn('warning message');

情報

一般情報をコンソールに出力するには、 console.info()メソッドを使用します

 console.info('general info message')

メッセージが適切に分類されている場合、ブラウザコンソールでメッセージを簡単にフィルタリングまたは検索できます。

プログラムフローのトレース

console.trace()メソッドを使用して、プログラムフローまたは実行のスタックトレースを出力します。これは、プログラムで関数が実行される順序を出力するため、デバッグに非常に便利な機能です。

console.trace()メソッドの動作を確認するには、 以下のように)3つの関数を作成し、関数の1つにスタックトレースを配置します。

 function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

ブラウザコンソールでfunctionOne()を呼び出すかトリガーすると、スタックであるため後入れ先出し(LIFO)で出力された関数呼び出しのスタックトレースが取得されます。

タイミングプログラムの実行

プログラムでの操作の実行にかかる時間を計るには、 console.time()メソッドを使用できます。 console.time()は通常、 console.timeEnd()メソッドと一緒に使用されます。後者はタイマーを終了するために使用されます。

Webページごとに最大10,000のタイマーを実行でき、タイマーに適切なラベルを付けることの重要性が強調されます。

forループが1から50,000までの数値を通過するのにかかる時間を計るには、次のようにタイマーを使用できます。

 console.time('loop timer 2');
for(i=1; i< 50001; i++){
}
console.timeEnd('loop timer 2');

カウント

console.count()メソッドは、プログラムで関数またはコードの一部が呼び出された回数を追跡するために使用されます。たとえば、次のようにforループが実行された回数を追跡できます。

 for(i=0; i<4; i++ ){
console.count();
}

ログメッセージのグループ化

ただ、タイマー方式のように、console.group()、およびconsole.groupEnd()メソッドは、通常はペアで使用されています。

groupメソッドは、ログメッセージをより適切に整理するのに役立ちます。たとえば、次のように、「warnings」というラベルの付いた警告メッセージのグループを作成できます。

 console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

警告グループ内の2つのメッセージは、以下の出力に示すように視覚的に分類されます。

コンソールのクリア

最後になりましたが、ブラウザコンソールでログメッセージをクリアする方法はいくつかあります。

次のようにconsole.clear()メソッドを使用します。

 console.clear()

ブラウザのキーボードショートカットを使用して、ブラウザコンソールをクリアすることもできます。

Google ChromeCtrl + L

FirefoxCtrl + Shift + L

ブラウザコンソールを最大限に活用する

このガイドでは、フロントエンドアプリケーションのデバッグに役立つさまざまなWebブラウザコンソールの方法をいくつか紹介しました。コンソールAPIは非常に軽量で、習得が容易で、ほとんどの最新のブラウザーで広くサポートされています。

次のプロジェクトからCAPTCHA検証を作成し、新しいデバッグスキルをテストしてください。