JavaScript コンソールを使用してワークフローを改善する方法

この記事では、主に JavaScript コンソールを使用して作業プロセスを改善する方法を紹介します。これを必要とする友人に共有します。

Web 開発者として、その方法を理解する必要があります。コードをデバッグします。バックエンド開発では、外部ライブラリを使用してログを記録し、場合によってはログをフォーマットして表示します。フロントエンドではブレークポイントとコンソールを使用しますが、ブラウザのコンソールは私たちが思っているよりもはるかに強力です。

コンソールについて考えるとき、最初に思い浮かぶのは console.log ですよね?しかし、私たちが思っているよりも多くの方法があります。では、コンソールを最大限に活用する方法を見てみましょう。これらのメソッドをより読みやすくするためのヒントをいくつか紹介します

コンソールとは何ですか?

JavaScript コンソールは、シェルのようなインターフェイスですぐに使用できる開発ツールが付属する最新のブラウザーの組み込み機能です。これにより開発者は次のことが可能になります:

• Web ページで発生したエラーと警告のログを表示します。

• JavaScript コマンドを使用して Web ページと対話します。

• アプリケーションをデバッグし、ブラウザーで DOM を直接走査します。

• Web アクティビティをチェックして分析します

基本的に、ブラウザで JavaScript を作成、管理、監視することができます。

Console.log、Console.error、Console.warn、および Console.info
これらはおそらく最も一般的に使用されるメソッドです。これらのメソッドには複数のパラメータを渡すことができます。各引数は評価され、スペース区切りの文字列で連結されますが、オブジェクトまたは配列の場合は、そのプロパティ間を移動できます。

Console.group

コードのロジックとプロセスをチェックするときに検出するために console.log() を大量に使用することがありますが、コンソールが大量に出力することがわかります。この方法を使用すると、一連の console.log (およびエラー メッセージなど) を折りたたみ可能なグループにグループ化できます。構文は非常に単純です。console.group() (デフォルトで閉じたい場合は console.groupCollapsed()) の前に、グループ化したいすべてのものを console.log に記録するだけです。次に、 console.groupEnd() で最後に終了グループを追加します。

Console.table

console.table を発見してから私の人生は変わりました。 console.log 内に JSON または非常に大きな JSON 配列を表示すると、不快な経験になります。この console.table を使用すると、列に名前を付けてパラメータとして渡すことができる優れたテーブルでこれらの構造を視覚化できます。

非常に優れており、デバッグに非常に役立ちます:

Console.count、Console.time、および Console.timeEnd
これら 3 つのメソッドは、デバッグが必要なすべての開発者にとってスイス アーミー ナイフです。 console.count はカウントし、出力は同じ行で同じラベルで count() が呼び出された回数です。 console.time は、入力パラメータとして指定された名前でタイマーを開始し、特定の Web ページで最大 10,000 個のタイマーを同時に実行できます。開始したら、console.timeEnd への呼び出しを使用してタイマーを停止し、経過時間をコンソールに出力します。

出力は次のようになります:

Console.trace と Console.assert

これらのメソッドは、呼び出されたコードの場所からスタック トレースを出力するだけです。 JS ライブラリを作成していて、エラーが生成された場所をユーザーに通知したいと想像してください。この場合、これらの方法は非常に役立ちます。 console.assert は console.trace に似ていますが、満たされていない条件のみを出力します。

ご覧のとおり、出力は、例外が生成されたときに React (またはその他のライブラリ) が表示するものとまったく同じです。

すべての本体を削除

以上がJavaScript コンソールを使用してワークフローを改善する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。