JavaScript コンソールのその他の機能

概要

おそらく、すべての JavaScript プロジェクトで console.log を使用しているでしょう。これは、変数の値やプログラムの実行中に何が起こっているかを確認するのに便利な方法です。しかし、JavaScriptconsole オブジェクトには、プロジェクトでの作業に役立つ他の多くの機能があります。この記事では私のお気に入りをいくつか紹介しますので、ぜひ仕事で活用してください。

ここでの例は、ブラウザで実行される JavaScript 用であることに注意してください。これは Node.js で実行される JavaScript に似ていますが、Node.js での動作は若干異なる場合があります。

コンソールログ

他のオプションに入る前に、console.log が何をするのかを確認しましょう。 console.log はコンソールにメッセージを出力します。オブジェクト、配列、オブジェクトの配列、文字列、ブール値など、基本的にコンソールに出力したいものは何でも入力できます。 console.log の使用例とその出力を次に示します。

console.log({ restaurantName: 'ピザプラネット' }); // { restaurantName: 'ピザプラネット' };

これは JavaScript で最も一般的なデバッグ方法であり、最も一般的なコンソール方法でもあります。それでは、他のオプションについてお話ししましょう。

コンソール.info

console.info は console.log とほぼ同じです。情報メッセージをコンソールに出力します。私の知る限り、ログと情報の間に実質的な違いはなく、メッセージをどのように分類するかによって決まります。ただし、ブラウザ コンソールから「情報」レベルのメッセージを非表示にすることを選択した場合、「ログ」メッセージと「情報」メッセージの両方が非表示になります。 console.info を使用するには、次のようにします。

console.log({ restaurantName: 'ピザプラネット' }); // { restaurantName: 'ピザプラネット' };

繰り返しますが、出力はほぼ同じです。

コンソール.警告

console.warn はコンソールに警告メッセージを出力します。基本的には前のものと同じことを行いますが、コンソールではメッセージの背景が黄色になり、警告アイコンが表示されます (少なくとも Chrome Dev Tools では)。プログラムでエラーが発生する可能性があるが、現在は問題が発生していないアクションを実行する場合は、console.warn を使用します。これにより、あなたやユーザー、他の開発者は、問題が発生する可能性がある場所を知ることができます。

console.warn({ restaurantName: 'ピザプラネット' }); // { restaurantName: 'ピザプラネット' };

前と同様に、同じ値を渡すことで警告をコンソールに出力できます。

コンソールエラー

console.error はエラー情報をコンソールに出力します。基本的には前のものと同じことを行いますが、コンソール内のメッセージの背景には赤い円と白い「x」エラー アイコンが表示されます (少なくとも Chrome Dev Tools では)。プログラムで問題が発生した場合は、console.error を使用します。これにより、他の開発者が問題の原因を簡単に見つけて修正できるようになります。エラーのスタック トレースが提供されるので、エラーを探すこともできます。

console.error({ restaurantName: 'ピザプラネット' }); // { restaurantName: 'ピザプラネット' };

前と同様に、同じ値を渡すことでエラーをコンソールに出力できます。

コンソールテーブル

これは私がよく忘れてしまうのですが、お気に入りのコンソール オプションの 1 つです。 console.table は、表形式で表示できるデータを受け入れて出力します。いくつかの例を見てみましょう。まず、オブジェクトの console.table から始めます。

console.table({ restaurantName: 'ピザ プラネット', streetAddress: '123 メープル' });

開発ツールの出力は次のようになります。

オブジェクトの各プロパティ名を取得してインデックス列に配置し、プロパティの値を値列に配置します。これは配列内の各プロパティに対して発生します。では、オブジェクトの配列を出力すると何が起こるでしょうか?結果は次のようになります。

私は慣れているので、通常は console.log を使用していますが、console.table の方がうまく機能し、オブジェクトをわかりやすく、読みやすい形式で出力してくれる場合がよくあると思います。

コンソール.アサート

console.assert は、判定した条件が満たされなかったことを示すメッセージをコンソールに出力するメソッドです。この関数は、評価される式と表示されるエラー メッセージという 2 つの引数を取ります。次に例を示します。

const obj = { restaurantName: 'ピザプラネット' };
console.assert(obj.restaurantName === 'Pizza Palace', 'レストランの名前は「Pizza Palace」ではありません');
// アサーション失敗; 「レストランの名前は「ピザ パレス」ではありません」

これはプログラムをデバッグするためのもう一つの非常に良い方法です。メッセージはアサーションが失敗した場合にのみ表示されるため、メッセージが表示されない場合は、式が正しく評価されていると想定できます。

console.group と console.groupEnd

console.group と console.groupEnd は、多数の console.log を論理的にグループ化する方法です。必要に応じてグループを折りたたんで非表示にすることができます。使い方はかなり簡単です:

コンソール.group();
console.log({ restaurantName: 'ピザパレス' });
コンソールのグループ終了();

グループ全体が崩壊する可能性があります。これは、コンソールに多くの情報を記録する必要がある場合に便利です。

結論は

JavaScript では、コンソール オブジェクトに使用できるメソッドが多数あります。これらは、メッセージをタイプ別にフィルタリングしたり、テーブルで 1 つ以上の項目を表示したり、必要に応じてグループ化したり折りたたんで非表示にしたりできるように開発に役立ちます。ワークフローが改善されます。

上記は、JavaScript コンソールのその他の機能の詳細です。JavaScript コンソールの詳細については、123WORDPRESS.COM の他の関連記事をご覧ください。