Home-theater-designers
Webブラウザコンソールは、フロントエンドアプリケーションのデバッグに最も広く使用されているツールの1つです。 Console APIは、開発者にエラーに取り組み、メッセージをログに記録する機能を提供します。
console.log（） はおそらくコンソールAPIで最も一般的に使用される方法ですが、ワークフローで使用できる他の方法もあります。このガイドでは、デバッグワークフローを改善するために使用できるさまざまなWebブラウザコンソールの方法を示します。
ロギングが重要なのはなぜですか？
Webブラウザコンソールへのログ記録は、フロントエンドまたはJavaScriptベースのアプリケーションをデバッグするための最良の方法の1つです。
関連：学習する価値のある6つのJavaScriptフレームワーク
最新のWebブラウザのほとんどはコンソールAPIをサポートしているため、開発者はすぐに利用できます。コンソールオブジェクトは、ブラウザのデバッグコンソールへのアクセスを提供する役割を果たします。実装はブラウザ間で異なる場合がありますが、ほとんどのメソッドはすべての最新のブラウザで機能します。
ヒント ：ブラウザコンソールは、このガイドで説明されているすべてのコードを実行できます。押す F12 キーボードでChromeまたはFirefoxでブラウザ開発者のツールを開きます。
文字列メッセージのログ
最も一般的なコンソールメソッドの1つは console.log（） 。文字列メッセージまたは何らかの値をWebコンソールに出力するだけです。単純な値または文字列メッセージの場合、 console.log（） メソッドはおそらく使用するのに最適なオプションです。
iPodからiTunesに転送する方法
出力するには こんにちは世界 メッセージ、あなたは以下を使用することができます。
console.log(`Hello World`); のもう一つの特別な機能 console.log（） メソッドは、DOM要素の出力またはWebサイトの一部の構造を印刷する機能です。たとえば、body要素の構造を出力し、その中のすべてのものは以下を使用します。
console.log(document.body) 出力は、HTMLツリーとしてのDOM要素のコレクションです。
インタラクティブなJavaScriptオブジェクトのロギング
NS 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などの一部のブラウザには、で表示できる最大1,000行の制限があります。 console.table（） 方法。
次の車のオブジェクトの配列があると仮定します。
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');
カウント
NS console.count（） メソッドは、プログラムで関数またはコードの一部が呼び出された回数を追跡するために使用されます。たとえば、次のようにforループが実行された回数を追跡できます。
for(i=0; i<4; i++ ){
console.count();
}ログメッセージのグループ化
タイマー方式と同じように、 console.group（） 、 と console.groupEnd（） メソッドは通常、ペアで使用されます。
groupメソッドは、ログメッセージをより適切に整理するのに役立ちます。たとえば、次のように、警告というラベルが付いた警告メッセージのグループを作成できます。
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()警告グループ内の2つのメッセージは、以下の出力に示すように視覚的に分類されます。
コンソールのクリア
最後になりましたが、ブラウザコンソールでログメッセージを消去する方法はいくつかあります。
使用 console.clear（） 次のように方法。
console.clear() ブラウザのキーボードショートカットを使用して、ブラウザコンソールをクリアすることもできます。
グーグルクローム ： Ctrl + L
Firefox ： Ctrl + Shift + L
ブラウザコンソールを最大限に活用する
このガイドでは、フロントエンドアプリケーションのデバッグに役立つさまざまなWebブラウザコンソールの方法をいくつか紹介しました。コンソールAPIは非常に軽量で、習得が容易で、ほとんどの最新のブラウザーで広くサポートされています。
ソーシャルメディアの使用をやめる方法
次のプロジェクトからCAPTCHA検証を作成し、新しいデバッグスキルをテストしてください。
共有 共有 つぶやき Eメール HTML、CSS、JavaScriptを使用してCAPTCHA検証フォームを作成するCAPTCHA検証を使用してWebサイトを保護します。
次を読む 関連トピック- プログラミング
- ウェブ開発
- JavaScript
Mwizaは専門職によってソフトウェアを開発し、Linuxとフロントエンドプログラミングについて幅広く執筆しています。彼の興味のいくつかには、歴史、経済学、政治、企業建築が含まれます。
MwizaKumwendaのその他の記事ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください