開発者コンソールについて知っておくべきことすべて
公開: 2020-01-31優れた専門家は彼らのツールを知っています。 WordPress開発者が自由に使える主なツールの1つは、ブラウザーに含まれているJavaScript開発者コンソールです。 この投稿では、ブラウザー開発者コンソールについて知っておく必要のあるすべてのことと、おそらくあなたが知らなかったいくつかのトリックや好奇心を紹介します。
開発者コンソールにアクセスする方法
まず最初に：ブラウザの開発者コンソールを開く方法を見てみましょう。 Firefoxユーザーの場合は、メニュー（右上隅）をクリックして、以下に示すようにWeb開発者オプションを探してください。
次に、[ Webコンソール]を選択します。
次のスクリーンショットに示すように、コンソールがブラウザに表示されます。 パネルを正確に表示する場所を構成できることを忘れないでください。 別のウィンドウに表示されるように設定することもできます（複数のモニターを使用している場合は非常に便利です）。
一方、Chromeユーザーの場合、手順は非常に似ています。 メニューにアクセスし、[その他のツール]、[開発者ツール]の順に選択します。
開発者コンソールの使用方法
ブラウザのJavaScriptコンソールは、コードのデバッグ、スクリプトのログ記録の確認、小さなコマンドの実行、およびWebへの影響をリアルタイムで確認するのに非常に役立ちます。 WordPressのプラグイン開発者として、コンソールが私に持っている主なユーティリティは明らかにデバッグです。それで、それが正確に何を提供するかを詳細に見てみましょう。
＃1異なるログレベル
開発者が通常JavaScriptコンソールを開く最初の理由は、コードをデバッグするためです。 エラーが発生した場合、または何かが失敗した場合は、コンソールにその情報が表示される可能性があります。 必要に応じて、独自の情報メッセージ、警告、またはエラーを起動することもできます。
たとえば、前のスクリーンショットでは、 consoleオブジェクト（コードのデバッグを支援することを目的としたグローバルオブジェクト）に、コンソールにメッセージを書き込むためのさまざまなメソッドがあることがわかります。
-
debugとlogはプレーンメッセージを表示します。 -
infoは情報メッセージを表示します。 Firefoxでは、メッセージの横に「情報」アイコンが表示されます。 -
warnは警告を表示し、通常は問題や正しくないことを指摘します。 通常、黄色で強調表示され、警告アイコンが表示されます。 -
errorは通常、最も重大なエラー（つまり、実際に失敗したもの）のために予約されています。 これは赤で表示され、スタックトレース（つまり、エラーを生成した関数とそのすべての呼び出し元）も出力します。
異なるログレベルを使用する利点は、表示するメッセージをいつでも選択できることです。 たとえば、次のスクリーンショットでは、情報メッセージとデバッグメッセージを非アクティブ化しています。
＃2実行時間の監視
アジャイルでは、「それを機能させ、うまく機能させ、高速化する」という言葉をよく耳にします。 「それを機能させるために」いくつかのコードを書いた後、結果が遅くて非効率的である可能性は低いとは言えません。 これが発生した場合、ボトルネックがどこにあるかを特定し、それらに対処することが重要です。
犯人を見つけて内部で何が起こっているのかを詳細に理解するためのプロファイラーなどのツールがありますが、「迅速で汚い」ソリューションが必要な場合もあります。 つまり、コード内で最も遅い関数を特定したいだけです…そして、単純なタイマーはこのタスクに最適です！
特定のコードの実行にかかる時間を知りたい場合は、コードの先頭でタイマーを開始し（ console.time ）、コードが終了したらタイマーを停止します（ console.timeEnd ）。
console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' ); コードがtimeEndに達すると、実行にかかった時間が表示されます。
Timer: 655ms - timer endedタイマーを開始および停止するときに、名前を付けていることに注意してください（私の例では「タイマー」）。 これは、それぞれが独自の名前を持つ必要な数のカウンターを作成し、それらをすべて一度に実行できるためです。
＃3自動カウンター
コード内の関数の実行回数を制御したり、ループの実行回数をログに記録したりする場合は、 console.countを使用してください。 関数が実行されるたびに、カウンターの現在の値を含む新しいログがコンソールに取得されます。
console.counterメソッドを使用するカウンター。＃4ログをフォーマットする方法
ログは、コードで何が起こっているのかを理解するのに役立ちます。 しかし、それは後で理解できるログを作成する場合にのみ可能です…
テキスト文字列
この投稿の冒頭で、 consoleにあるすべてのログメソッドについて簡単に説明しました。 私が共有した例は、いくつかのプレーンテキストを印刷しました。 つまり、このステートメントは次のとおりです。
console.log( 'Hello world!' );このテキストを印刷しました：
Hello world!代わりにオブジェクトを印刷したい場合はどうなりますか？ さて、これ：
obj = { x: 1, y: { a: 'hola' } }; console.log( obj );これになります：
しかし、複数のものをログに記録したい場合はどうでしょうか。 console.logへの複数の呼び出しを使用する必要がありますか？ まあ、答えはノーです、それは必要ではありません。 1回の呼び出しで必要なものすべてをログに記録できます。
ログのグループ化…
コードに多くのログが含まれ始めたら（たとえば、ここのように）：
すべてのログが単一のテキストストリームにマージされるため、結果は少し混乱する可能性があります。
Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6 幸い、 consoleオブジェクトには、この問題を解決するための2つのメソッドgroupとgroupEndが用意されています。 それらを使用して、ログメッセージをグループ化できます。 グループを作成するだけです（たとえば、関数ごとに1つのグループ）。
そして、次のように表示されます。
テーブル
データ収集を扱う場合、それらを視覚化するのは必ずしも簡単ではありません。 たとえば、次のようなアイテムのリストがあるとします。
data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ]; console.logを使用すると、次のようになります。
console.logを使用してオブジェクトを作成すると、多かれ少なかれわかりやすい方法で表示されます。 それぞれがより多くのフィールドを持つより多くのオブジェクトができるまで、これは多かれ少なかれOKです。 このタイプのデータ構造に直面する場合は、 console.tableを使用してログに記録することをお勧めします。
＃5複雑な型（オブジェクトと配列）を正しく表示する方法
最後に、今日の投稿を、多くの開発者が知らないことで締めくくりたいと思います。たとえば、プロジェクトに取り組んでいて、オブジェクトを更新する前後のオブジェクトの値を確認したいとします。 これを行うには、次のGIFに示すように、変更を行う前と後で変数をconsole.logにする可能性があります。
前の例では、1に設定された値を含むオブジェクトをログに記録します。次に、値を200に更新して、オブジェクトを再度ログに記録します。 最初のログには常に元の値（1）が表示されると予想されますが、オブジェクトを展開すると、実際には新しい値200が表示されることに注意してください。何が起こっているのでしょうか。
基本的に、ログメッセージにはオブジェクトへの参照が含まれているため、オブジェクトを展開すると、ログが作成されたときのオブジェクトではなく、現在のオブジェクトが表示されます。 くそー可変性！
この問題を解決するには、ログにコピーを送信するだけです（lodashやそのcloneDeepメソッドなどのライブラリを使用すると、これが非常に簡単になります）。 このように、ログに記録される最初のオブジェクトは、変更できないコピーになります（参照がないため）。
今日はこれですべてです。 この投稿が気に入っていただけたでしょうか。 consoleで実行できるすべての情報が必要な場合は、MDNのドキュメントを確認してください。 お友達と共有することを忘れないでください？ また、何か別のことをしたり、読者と共有するためのアドバイスがあれば、コメントを残してください。
UnsplashのTimvanderKuipのImagendestacada。