Chromeデベロッパーツールは（デベロッパーツールをいう。）Google Chromeブラウザ、Webオーサリングのセットやデバッグツールに埋め込まれ、開発者向けツールの提供熟練した使用は、その様々なモジュールが表現の意味と役割で知られています。以下は、不備が批判を願って、各モジュールの導入を拡大するために、学習と開発の経験を結合します。右セレクト検査またはF12キーを押し、として直接使用モジュール：
開発者ツール一般的に使用されるパネル
図、Elememts、コンソール、ソース、ネットワーク、など、Chromeデベロッパーツールの性能、メモリ、アプリケーション、セキュリティ、Audites とLayers10機能パネル。これは主にネットワーク、パフォーマンスページと試運転パネルなどElememts、コンソール、ソース、およびパフォーマンス関連のパネルにある関連など。パネルの機能分割は、実質的に、以下の[1] ：
要素パネル：あなたはテストページのDOM構造、CSSスタイルの編集、ページレイアウトとデザインを表示することができます。
コンソールパネルは：だけでなく、ConsoleオブジェクトのインタラクションとJavascriptのページを通じて、JavaScriptのスクリプトを実行することができ、JavaScriptのシェルとして見ることができます。
ソースパネルは：;編集CSSおよびJavaScriptファイルの内容、CSSやJavaScriptのフォーマットを混乱されます。JavaScriptをデバッグサポート、Webアプリケーションのロードされたすべてのファイルを参照してくださいローカルフォルダに変更されたファイルを保存するためにワークスペースを設定します。
ネットワークパネル：、コンテンツページのテーブル内のすべての要求を表示するようなタイムラインと滝のネットワーク要求として、各要求ヘッダー、要求ライン、要求情報の本体を見ることができます。
パフォーマンスパネル：記録とアプリケーションライフサイクルイベントを表示、および実装プロセス分析の主なポイントのいくつかのパフォーマンスに影響します。
メモリパネル：JavaScriptがメモリリークのトレース、ヒープメモリの占有の操作中に表示し、その上にします。
アプリケーションパネル：表示データの格納状況のWebアプリケーション、基本的なデータPWA;のIndexedDB;のWeb SQL、ローカルとセッションストレージ、クッキー、アプリケーションキャッシュの画像フォントとスタイルシート。
セキュリティパネル：現在のページにいくつかの基本的な安全情報を表示します。
Auditesパネル：現在のページは、WebアプリケーションとWebパフォーマンスを診断し、最適化し、いくつかの提案を与えることになります。
レイヤーパネル：基本情報描画処理成層のいくつかを示しています。
以下は、説明するために使用されるいくつかの機能モジュールになります。
1、要素のパネル
要素パネルは主に表示および編集するCSSスタイルにDOM構造のために使用され、テストの開発フェーズは、多くの場合、ときにページのレイアウトを使用しています。以下の図では、HTMLファイルと元のことを除いて、（右図に文書画像を直接、完全なDOM構造を視覚化コンソールで入力された）基本的に同じプロセスで構築されたDOMツリー構造要素パネルをレンダリングするブラウザに表示直接ブラウザで、ツリーのメモリに格納されており、使用することを、理解していない、あなたは、クエリとJavaScriptを使用して変更することができます。
DOMツリーを対応するHTMLファイルのHTMLファイル
DOMツリービューの基本的な機能に加えて、あなたは、マウスの右ボタンをクリックして、DOMノードに追加、削除および操作を変更することができます。以下は、上から下へ、それぞれ：属性の追加属性を追加します;編集属性：編集属性、HTMLなどの編集：編集ノードと（テキストノードを含む）HTML要素のすべての子ノード、削除要素：削除要素。非表示要素：要素を除去するステップと、力状態：パターンに追加することが選択されたスタイルの右側素子に表示;上のブレーク：（;ノード除去ノード除去サブツリーサブツリー修正変更、属性変更する属性変更を含む）DOMブレークポイントの設定、再帰的に展開します。DOMツリーの、崩壊の子供：要素を折りたたみ、ビューにスクロール：スクロールするノードは、ビューポートに表示されていること。
DOM [編集]メニュー
次のようにスタイル、エレメントパネルの各サブラベルの機能の試運転段階で。
- スタイル（様式）：継承と直接計算プロセスとCSS（カスケーディングスタイルシート）スタイルの特性を反映してラミネート。
- 計算された（計算値）：参照ボックスモデルと、現在のノードを介して計算されたパターンデータ。
- イベント・リスナー（イベントリスナーは）：イベントとイベントリスナー関数を結合現在のノードを表示します。
- DOMブレークポイント（DOMブレークポイント）：ビューは、現在のDOMノードセットを破ります。
- プロパティ（プロパティ）：現在のノード（オブジェクト）のすべての属性を表示します。
- アクセシビリティ：アクセシビリティツリーは、ページ全体を表示します。
まず、スタイルを使用して、サブタグ、例のラベルパターンにhao123サイトのナビゲーションマップ：
（1）あなたはラベルを表示したいページを選択します。
対応する要素は、経路上に見られること（2）を意味します。
対応する要素は、スタイルから継承されたそれぞれの親要素の中に発見されていること（3）を意味します。
（4）特定のスタイルは、豊かなこのエリアがあります。削除するスタイルの前にスタイルをオフにすると、新しいスタイルにも、あなたも要素可視化表示にクラスを追加するための.clsに右上隅を生き残ることができ、この領域をダブルクリックすることができます。
（5）は、ソースパネルのスタイルファイル内の対応するファイルを表示するには、リンクをクリックして、スタイルの情報の特定のソースを示しています。CSSスタイルのソースは、通常は以下のとおりです。リンクタグで参照される外部CSSファイル、タグに埋め込まCSS内の<style>スタイル属性とCSS要素。
注：ユーザエージェントスタイルシートスタイルシート（5）は、ブラウザによって提供されるデフォルトのスタイルのセットであり、デフォルトでは、任意のスタイルを提供していない要素の場合に使用されます。
要素、スタイル
第二に、コンピューサブラベルショー変換CSSスタイルの異なるソース、スタイルは、最終的にDOMの各ノードについて計算とComputedStyle構造に格納されています。対応する要素は、ダブルクリックの異なる位置によって顔料パディング、ボーダー、マージンの属性値を変更することができる（上、下、左、右）を使用する場合、あなたはまた、フィルタを介してスタイルフィルターフィルターを確認する必要があります。
サブタブが要素に結合したイベントを表示するために使用することができ、再び、イベント・リスナー、およびファイルの場所イベント。
最後に、DOMブレークポイント、プロパティと比較的小さいアクセシビリティの使用。前記、ページ全体アクセスツリーを表示するアクセスサブタブ、ツリー関連で有用な表示スクリーンリーダ（リーダ画面）によって、対応するコンテンツノードからDOMツリーのサブセットである[2] 。