Google Chrome デベロッパー ツールのネットワークは、フロントエンド、プログラム、その他関連する開発者によってよく使用されますが、それぞれの機能の意味をご存知ですか? この記事を読むと、半分の労力で 2 倍の成果が得られると思います。あなたの仕事の効果
私は 360 速度のブラウザと Google カーネルを使用することが多いため、この記事では 360 速度のブラウザの開発者ツール ネットワークを例として取り上げます。これは基本的に Google のネットワークと一致しています
Google ネットワークは、大まかに次の機能を実現するのに役立ちます。
インターフェースの戻り値を見てみる
インターフェースのリクエストヘッダーとレスポンスヘッダーを見てください。
リソースの読み込み速度を確認する
リソースサイズ、キャッシュステータス、応答ステータス（CDN、待ち時間など）を表示します。
Google NETWORKのコントロールパネルは主に7つのセクションに分かれています
-
機能エリア 2. スクリーニングエリア (機能エリアファネルをオンにする必要があります) 3. スナップショットエリア (機能エリアはスクリーンキャプチャを有効にする必要があります)
4. 時間軸エリア (機能エリアで概要を有効にする必要があります) 5. メイン表示エリア 6. 情報概要エリア 7. コンソール
写真が示すように:
1. 機能エリア
-
赤い点はネットワークのログ機能が有効かどうかを表し、灰色の場合は有効になっていないことを意味し、赤い点は有効であることを意味します。
-
ネットワークログをクリアする
3. カメラが画面をキャプチャします。デフォルトはオフです。クリックすると、アイコンが青になり、さまざまな時点でページのスナップショットが記録されます。このボタンがオンになっている場合にのみ、3 つのスナップショット領域が表示されます
4. ファネルはフィルター オプションを有効にするかどうかを表し、このボタンがオンになっている場合にのみ 2 つのフィルター領域が表示されます。
5. 虫眼鏡はクイック検索ボタンを表しており、現在のページに含まれる内容をすぐに見つけることができます。
6. リクエスト レコードを表示するためにより大きな領域を使用するかどうかを表します。大きな表示が好きです。通常はオンにできます。
7. 概要サマリーを表示するかどうかを示します。このボタンがオンの場合のみ 5 つの時間軸が表示されます。
8. フレームごとにグループ化。このオプションをチェックすると、次の図に示すように、ネットワーク リクエストがフォーム名ごとにグループ化されます。
9.重要:ログを保存する。ログを保存するかどうか。チェックすると、ページが更新された後もログが消えません。この機能は非常に便利です。たとえば、ページがジャンプした後、その前にどのようなリクエストが送信されたかを確認したい場合などです。ページ ジャンプ (他の人の Web サイトのログイン リクエストの表示、ログイン成功後に返される内容、ログイン成功後に開始されるリクエスト、リダイレクト先のアドレスなど) 機能:
(1) いくつかの中間ページ ジャンプが確認でき、パケットをキャプチャする手間が省けます。
(2) 前ページのデータと比較できます。
10. キャッシュを無効にし、キャッシュを切り替え、この機能をオンにすると、現在の Web サイト上の js、css、画像などのブラウザのキャッシュが無効になり、すべてのリクエストがサーバーに再送信されます。Ctrl+F5 を押しても同じ効果が得られます。キャッシュの無効化をオンにした場合、オフにする必要はなく、毎回キャッシュなしでロードされます。
チェック後のフレームグループ化効果によるグループ化
11. オフラインとは、PWA のテストなどのネットワーク接続スイッチです。または、ネットワークが弱い場合の迅速な構成。
12. [オンライン] のドロップダウン リストはネットワーク速度のしきい値で、アップロードやダウンロードなどの最大ネットワーク速度を設定できます。一般に、さまざまなネットワーク条件下での Web ページの表示効果を確認できます。
2. 上映エリア
1. 機能: リクエストが多いページについては、フィルタリングが必要になる場合があります。
2. 機能: ツールバーは、パス フィルタリング (通常のサポート)、タイプ フィルタリング (すべて、XHR、JS、写真など) を提供し、すばやく表示するのに便利です。CTRL を押したまま複数選択します。
3. データ URL を非表示にする役割: Web サイト開発者は、HTTP リクエストの数を減らすために、小さな画像や CSS スクリプトを BASE64 形式の HTML に埋め込むことがよくあります。[データ URL を非表示にする] オプションをオンにすると、リクエスト リスト内の data: や blob: などのリクエストを非表示にすることができます。
4.フィルター検索ボックス
Chrome が提供する上記のフィルターに加えて、フィルター ボックスのフィルター属性を使用して、リクエスト ログを非常に柔軟にフィルターすることもできます。
あいまい検索 (URL アドレスのみを検索) を実行できます。先頭と末尾に / を追加すると、通常の一致を意味します (URL アドレスを検索し、同時にコンテンツを返します)。古いバージョンの Chrome には正規表現オプションがある場合があります。フィルター入力ボックスの右側で、通常のフィルターが有効になることを確認します。
共通のフィルター属性については、次の表を参照してください。
テキスト版:
ドメイン: 指定されたドメイン名のリクエストをフィルターで除外し、オートコンプリートをサポートするだけでなく、* マッチングもサポートします。
has-response-header: 指定された応答ヘッダーを含むリクエストをフィルターで除外します。
is: is:running によって WebSocket リクエストを見つけます。
より大きい: 指定されたバイト サイズより大きいリクエストをフィルターで除外します。ここで、1000 は 1k を意味します。
メソッド: GET リクエスト、POST リクエストなど、指定された HTTP メソッドのリクエストをフィルタリングして除外します。
mime-type: 指定されたファイル タイプのリクエストをフィルタリングして除外します。
混合コンテンツ: 混合コンテンツのリクエストをフィルターで除外します (意味がわかりません)。
スキーム: 指定されたプロトコル (scheme:http、scheme:https など) のリクエストをフィルターで除外します。
set-cookie-domain: 指定された Cookie ドメイン名属性の Set-Cookie を含むリクエストをフィルターで除外します。
set-cookie-name: 指定された Cookie 名属性を持つ Set-Cookie を含むリクエストをフィルターで除外します。
set-cookie-value: 指定された Cookie 値属性の Set-Cookie を含むリクエストをフィルターで除外します。
status-code: 指定された HTTP ステータス コードを持つリクエストをフィルターで除外します。
(1) フィルターの使用方法 1: Web ページ内のさまざまなドメイン名から要求されたリソースをフィルターしたい場合、フィルター ボックスに [ドメイン:] を入力すると、Chrome が関連するドメイン名の情報を自動的に入力します。 。
(2) 開いた Web ページで、どのリクエストがキャッシュを使用しているかを確認するにはどうすればよいですか? [is:running] に対応するコマンド [is:from-cache] を使用します。
3. スナップショット領域と 4. タイムライン領域
これら 2 つの領域は主に、Web ページの読み込みステータスの分解表示を提供します。
スナップショット領域では、ブラウザが Web ページを開くプロセスと、Web ページ全体を開くのにかかる時間をより直感的に確認できます。
時間軸エリアでは、マウスホイールをスライドさせると時間が分からなくてもファイルの読み込み状況が確認できるので、Webページで読み込みが遅いファイルを見つけるのに非常に役立ちます。
5. メイン表示エリア
1. メイン表示領域には、name (名前)、status (ステータス)、Type (タイプ)、Initiator (イニシエーター)、Size (サイズ)、Time (時間)、Waterfall (ウォーターフォール分析) が含まれます。
名前: リクエストされたリソースの名前
ステータスHTTP: ステータスコード
タイプ: 要求されたリソースの MIME タイプ
イニシエーター: リクエストを開始したオブジェクトまたはプロセス
サイズ: サーバーから返された応答のサイズ (ヘッダーと本文を含む)。解凍されたサイズを表示できます。
時間: リクエストの開始からレスポンスの最後のバイトを受信するまでの合計時間
ウォーターフォール: 各リクエストに関連するアクティビティの視覚的な分析グラフ
2. デフォルトでは、リクエストリストはリソースリクエストが開始された時刻に従って昇順にソートされますが、関連するリストのヘッダーをクリックするだけで、指定した列でソートすることも選択できます。
3. リソースの名前をクリックすると、リソースの詳細情報が表示されます。表示される情報は、選択したリソースの種類によって異なり、次のタブ情報が含まれる場合があります。
Headers このリソースの HTTP ヘッダー情報。
[プレビュー] には、選択したリソース タイプ (JSON、画像、テキスト) に基づいてプレビューが表示されます。
レスポンス HTTPレスポンス情報を表示します。
Cookie リソースの HTTP 要求および応答プロセスの Cookie 情報を表示します。
タイミングは、リクエストのライフサイクルのさまざまな部分でリソースが費やした時間を示します。
上記の 4 つのタブについて、各機能を詳しく説明します。
① リソースのHTTPヘッダー情報を表示する
「ヘッダー」タブでは、HTTP リクエスト URL、HTTP メソッド、ステータス コード、リモート アドレスなどの基本情報と、レスポンス ヘッダー、リクエスト ヘッダー、クエリ文字列パラメータまたはフォーム データなどの詳細情報が表示されます。
② リソースのプレビュー情報を表示する
「プレビュー」タブでは、選択したリソースタイプ(JSON、画像、テキスト、JS、CSS)に応じて、対応するプレビュー情報を表示できます。以下の図は、選択したリソースがJSON形式の場合のプレビュー情報を示しています。
③リソースHTTPのレスポンス情報を参照する
[レスポンス]タブでは、選択したリソースタイプ(JSON、画像、テキスト、JS、CSS)に応じて、対応するリソースのレスポンス応答内容(純粋な文字列)を表示できます。選択したリソースがCSS形式の場合の応答内容を次の図に示します。
④ リソースCookie情報の表示
選択したリソースにリクエストとレスポンスの過程で Cookie 情報がある場合、[Cookie] タブが自動的に表示され、そこですべての Cookie 情報を確認できます。
名前: クッキーの名前。
値: Cookie の値。
ドメイン: Cookie が属するドメイン名。
パス: Cookie が属する URL。
Expire/Max-Age: Cookie の有効期間。
サイズ: Cookie のバイト サイズ。
HTTP: Cookie はブラウザによってのみ設定でき、JS は変更できないことを示します。
安全: Cookie が安全な接続経由でのみ送信できることを示します。
⑤ リクエストのライフサイクルの各部分でリソースが費やした時間を分析する
[タイミング] タブでは、リクエストのライフ サイクル全体でリソースの各部分に費やされた時間を表示できます。これには、次のプロセスに費やされた時間が含まれる場合があります。
キューイング キューイングに費やされた時間。レンダリング エンジンによってリクエストが優先度の低いリソース (画像) とみなされ、サーバーが利用できず、同時リクエストの最大数がブラウザの最大接続数 (Chrome の最大同時接続数) を超えていることが考えられます。接続は6)です。
ストール HTTP 接続の確立からリクエストの送信 (実際のデータ転送) までにかかる時間。プロキシの処理に使用される時間が含まれます。確立された接続がある場合、この時間には、確立された接続が再利用されるまでの待機時間も含まれます。
プロキシ ネゴシエーション プロキシ サーバーとの接続に費やした時間。
DNS ルックアップ DNS ルックアップを実行する時間。Web ページ上のすべての新しいドメイン名は DNS クエリを通過します。ブラウザに 2 回目の訪問用のキャッシュがある場合、この時間は 0 になります。
初期接続/接続中 TCP ハンドシェイクと再試行時間を含む、接続の確立にかかる時間。
SSL ハンドシェイクが完了するまでにかかった時間。
送信されたリクエスト リクエストが開始された時刻。
待機時間 (最初のバイトまでの時間 (TTFB)) は、最初のネットワーク要求が開始されてからサーバーから最初のバイトを受信するまでの時間です。これには、TCP 接続時間、HTTP 要求が送信される時間、および応答メッセージフェスティバルタイムの最初のバイト。
コンテンツのダウンロードが応答応答データを取得するのにかかる時間。
TTFB のこの部分に費やされる時間が 200 ミリ秒を超える場合は、ネットワークのパフォーマンスの最適化を検討する必要があります。詳細については、ネットワーク パフォーマンスの最適化スキームとその中の関連参考資料を参照してください。
リソースのイニシエーター (リクエストソース) と依存関係を表示する方法 (Shift キーを押しながら)
Shift キーを押しながらリソース名の上にカーソルを移動すると、どのオブジェクトまたはプロセスがリソースを開始したか (リクエスト ソース)、およびリソースのリクエスト中にどのリソースがトリガーされたか (依存リソース) を表示できます。
リソースの上に緑色でマークされた最初のリソースがリソースのイニシエーター (リクエスト ソース) であり、リソースのイニシエーターとして緑色にマークされた 2 番目のリソースが存在する場合もあります。
このリソースの下に赤色でマークされているリソースは、このリソースの依存リソースです。
6: 情報概要エリア
情報サマリエリアには、[リクエスト数]、[データ通信量]、[ロード時間情報]などが表示されます
DOMContentLoaded イベントは、ページ上の DOM が完全に読み込まれて解析された後にトリガーされ、CSS、画像、およびサブフレームが読み込まれるのを待ちません。DOMContentLoaded イベントは、概要では青色の縦線でマークされ、正確な時刻は概要では青色のテキストで表示されます。
ページ上のすべての DOM、CSS、JS、および画像が完全に読み込まれた後に、load イベントがトリガーされます。ロード イベントは、概要とリクエストのテーブルでも赤い縦線でマークされ、正確な時間も概要に赤いテキストで表示されます。
DOM ドキュメントの読み込みの読み込み手順と組み合わせると、DOMContentLoaded イベント/Load イベントのトリガー タイミングは次のようになります。
HTML 構造を解析します。
外部スクリプトとスタイルシート ファイルを読み込みます。
スクリプトコードを解析して実行します。// 一部のスクリプトはページの読み込みをブロックします
DOMツリーの構築が完了しました。//DOMContentLoaded イベント
画像などの外部ファイルを読み込みます。
ページが読み込まれます。//イベントをロード
7: コンソールコントロールエリア
このあたりはもともとF12の別コラムでしたが、ネットワークと密接な関係があるため一つにまとめ、後ほど別項で紹介します。