ブラウザコンソールでデータをテーブルとして表示する方法

コンソールは、Web サイトで発生したエラーを記録するブラウザーに組み込まれたツールです。リンク切れ、不完全なJavaScript関数、不明な CSS プロパティなどのエラーがある場合、ブラウザのコンソールにエラー メッセージが表示されます。

シェルおよびコンソール API を介してコンソールと対話することもできます。これは、特定の機能や出力データをテストするのに役立ちます。この記事では、コンソール API を使用する際の役立つヒントを紹介します。

ブラウザ上でコンソールにアクセスする

Chrome では、[表示] > [開発者] > [JavaScript コンソール]を選択してコンソールを表示できます。さらに、キーボード ショートカット ( OS X ではCmd+ Option+ 、Windows では+ +)も使用できます。JCtrlShiftJ

以下はエラーのない Chrome コンソールです。

ここから、コンソール API で提供されるコマンドの使用を開始できます。

コンソールとの対話

コンソール自体を介して、または JavaScript を追加することで、ブラウザのコンソールと対話できます。たとえば、ここではコンソールに「Good Morning!」という結果を出力するように依頼します。コンソールにconsole.log()コマンドを直接入力します。

前述したように、console.log() を適用することもできます。Console.log()を使用して、JavaScript の条件ステートメントをテストできます。 console.log()を使用すると、結果がいつtrueまたはfalse (true または false) を返すかをより明確に確認できます。

以下に例を示します。

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

変数には数値1が含まれているため、上記のコードはtrueを返します。コンソールでは、ブラウザがコンテンツ「true」を含むテキストを出力していることがわかります。

データを表形式で出力する

場合によっては、以下に示すように、データの配列またはオブジェクトのリストを処理する必要があります。

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

console.log() メソッドを使用すると、このデータを読み取るのが難しくなり��す。console.log()メソッドは、以下に示すように、折りたたみ可能なツリー ビューで配列を表示します。

このような配列を処理する必要がある場合は、console.table()を使用してデータを出力する方が良い方法です。このメソッドは、データを表形式で表示します。上記と同じデータを使用すると、結果は次のようになります。

ブラウザ コンソールは、Web 開発者が Web サイト内のエラーを処理するのに役立ちます。ユーザーは、console.log() メソッドと同様に、これを使用してデータ出力を調べることもできます。データの配列がある場合は、読みやすい表形式で配列を表示するため、console.table()コマンドの方が便利です。 console.table()は、Chrome、Safari、Opera の最新バージョンなどの Webkit ベースのブラウザにのみ適用できることに注意してください。

成功することを願っています。