コンソールコマンドガイド

Webブラウザー開発者コンソールは、シンプルなエラーレポーターから包括的なロギングシステムに進化する強力なデバッグツールです。ネットワークのアクティビティ、セキュリティの問題などを追跡し、JavaScriptがconsoleオブジェクトを介してデバッグ情報を出力できるようにします。ブラウザ全体で大部分が一貫していますが、微妙な視覚的および機能的な違いが存在します。このガイドは、ChromiumベースのエッジがChromeと同様に動作するFirefoxとChromeに焦点を当てています。 WhatWG仕様には、詳細が記載されています。

クイックナビゲーション

• ロギングの基本
• コンソールクリア
• 一般的なロギング方法
• 文字列のフォーマット
• スタイリング出力
• アサーション
• カウントが発生します
• プロパティの検査
• グループ化出力
• テーブル出力
• タイミング操作
• スタックトレース
• debuggerでのデバッグ
• 追加のコンソールユーティリティ

console.log()でロギング

consoleオブジェクト自体を調べることから始めます。

 console.log（console）;

これにより、オブジェクトのプロパティが明らかになります。これは、主に機能し、ブラウザ固有のマイナーなバリエーションを備えています。たとえば、Chromeには「メモリ」プロパティが含まれ、Firefoxは「名前」プロパティを提供します。これらの違いは一般に軽微です。

コンソールのクリア： console.clear()

雑然としたコンソールはデバッグを妨げます。使用：

 console.clear（）;

これにより、コンソールの出力がクリアされ、確認メッセージが表示されます（たとえば、「コンソールがクリアされた」）。

一般的なロギング関数： debug() 、 error() 、 info() 、 log() 、 warn()

5つの関数は似ていますが、ブラウザ固有の拡張機能を提供します。

 console.debug（）;
console.error（）;
console.info（）;
console.log（）;
console.warn（）;

これらの機能は、カラーコーディングとアイコンの使用に関するChromeとFirefox、および提供される詳細レベル（たとえば、エラーのスタックトレース）でわずかに異なります。ブラウザは、各ログタイプの可視性を制御するためのフィルタリングオプションを提供します。

これらの関数は、さまざまなJavaScriptデータ型（文字列、数字、オブジェクト、配列）を引数として受け入れます。複数の引数がインラインで表示されます。

文字列置換

強化されたロギングには、より明確な出力のための文字列置換が含まれます。

 console.log（ 'これは文字列：％s'、 'string'）;
console.log（ 'これは数字：％i'、42）;
console.log（ 'これはオブジェクトです：％o'、{object： 'object'}）;

サポートされている代替タイプには、 %s （string）、 %i （integer）、 %o （object）などが含まれます。テンプレートリテラルは、より簡潔な代替品を提供します。

 console.log（ `これは文字列です：$ {'string'}`）;
console.log（ `これは数字です：$ {42}`）;
console.log（ `これはオブジェクトです：$ {{object： 'object'}}`）;

両方の方法を組み合わせて、柔軟なフォーマットを組み合わせることができます。

スタイリングコンソール出力

CSSスタイルを適用して、読みやすさを向上させます。

 console.log（ '％cthisは大きな赤いテキストです'、 'color：red; font-size：30px;'）;

マイナーなブラウザ固有のレンダリングの違いが発生する可能性があります。複数の%cプレースホルダーは、単一のログステートメント内でさまざまなスタイリングを可能にします。変数を使用して、スタイルを保存および再利用し、コード組織を改善できます。

アサーション： console.assert()

console.assert()はブール条件を取ります。 falseの場合、エラーメッセージが出力されます。そうでなければ、それは何もしません。これにより、条件付きエラーロギングが簡素化されます。

値= 10;
console.assert（value <p> Chromeは、失敗したアサーションのスタックトレースを提供しますが、Firefoxではそうではありません。</p><h3>カウントオカレンス： <code>count()</code>および<code>countReset()</code>
</h3><p> <code>console.count()</code>を使用して、関数呼び出しまたはイベントの発生を追跡します。オプションのラベルは、個別のカウントを可能にします：</p><pre class="brush:php;toolbar:false"> console.count（ 'myFunction'）;
console.count（ 'myFunction'）;
Console.Count（ 'AnotherFunction'）;

console.countReset()特定のカウンターをリセットします。ブラウザ固有の違いは、リセットの視覚的に示される方法に存在します。

オブジェクトの検査： dir()およびdirxml()

console.dir()ツリーのような構造にオブジェクトプロパティを表示し、 console.dirxml() xml/html要素を対象としています。 Firefoxは、両方のconsole.log()のエイリアスとして両方を扱います。 Chromeのconsole.dir() 、DOM要素の検査に特に役立ち、詳細なプロパティ情報を提供します。

グループ化出力： group() 、 groupCollapsed() 、 groupEnd()

オプションでラベルを使用して、 console.group()を使用してコンソール出力を整理します。 console.groupCollapsed()最初にグループを崩壊させます。 console.groupEnd()グループを閉じます。ネストがサポートされています。スタイリングはグループラベルに適用できます。

テーブル出力： console.table()

console.table()を使用して、表形式のアレイとオブジェクトを表示します。オブジェクトの配列は、列ヘッダーとしてキーでレンダリングされます。複雑なデータ構造（配列の配列、配列値を持つオブジェクト）により、より手の込んだテーブルが得られます。ブラウザの違いは、ネストされたオブジェクトがテーブル内でどのように処理されるかに存在します。

タイミング操作： time() 、 timeLog() 、 timeEnd()

console.time() 、 console.timeLog() 、およびconsole.timeEnd()を使用してコード実行時間を測定します。 console.timeLog()は、中間タイミングの更新を提供します。出力形式のマイナーなブラウザ固有の違いが存在します。

スタックトレース： console.trace()

スタックトレースを生成して、特定のログステートメントの原点を特定します。

debuggerでのデバッグ

debuggerステートメントは実行を停止し、そのラインでデバッガーを開きます。これはconsoleオブジェクトメソッドではなく、コンソールに統合された強力なデバッグツールです。

追加のコンソールユーティリティ

いくつかのブラウザ固有のユーティリティが存在します：

• $0 、 $1など：検査官の選択したDOM要素にアクセスするショートカット。
• $('element') 、 $$('elements') ： document.querySelector()およびdocument.querySelectorAll()のショートカット。
• $x('xpath') ：xpath expression Evaluator。
• clear() ：メッセージなしでコンソールをクリアします。
• getEventListeners(object) ：DOM要素に接続されたイベントリスナー（Chromeのみ）をリストします。

この包括的なガイドは、効果的なデバッグと開発のためのブラウザコンソールコマンドを活用するための強力な基盤を提供します。さらなる調査により、追加のブラウザ固有の機能と機能が明らかになります。

以上がコンソールコマンドガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。