最近、ブラウザの開発者ツールの使い方がわからないという友人が多いので、今日は開発者ツールについて詳しく見ていきます。
Google Chromeを例に挙げます
Google Chromeのデベロッパーツールのネットワークは学習でよく使うものですが、それぞれの機能の意味をご存知ですか？
私は 360 Speed Browser と Google Kernel をよく使用するため、この記事では 360 Speed Browser の開発者ツール Network を例に取り上げます。これは基本的に Google の Network と同じです。
Google ネットワークは、大まかに次の機能を実現するのに役立ちます。
インターフェースの戻り値を見てみる
インターフェースのリクエストヘッダーとレスポンスヘッダーを確認します。
リソースの読み込み速度を確認する
リソースサイズ、キャッシュステータス、応答ステータス（CDN、待機時間など）を確認します。
Google NETWORKのコントロールパネルは主に7つの主要なセクションに分かれています。
1. 機能エリア
2. フィルタリングエリア (機能エリアのファンネルをオンにする必要があります)
3. スナップショットエリア (機能エリアでスクリーンキャプチャをオンにする必要があります)
4. タイムラインエリア (機能エリアで概要をオンにする必要があります)機能エリア)
5. メイン表示エリア
6. 情報概要エリア
7 、コンソール
写真が示すように
1. 機能エリア
1. 赤い点はネットワークログ機能がオンになっているかどうかを表し、灰色の場合はオンになっていないことを示し、赤い点はネットワークログ機能がオンになっていることを示します。
2.ネットワークログをクリアする
3. カメラが画面をキャプチャします。デフォルトではオフになっています。クリックすると、アイコンが青になり、さまざまな時点でのページのスナップショットが記録されます。このボタンがオンになっている場合にのみ、3 つのスナップショット領域が表示されます。
4. じょうごはフィルタリング オプションがオンになっているかどうかを表し、このボタンがオンの場合にのみ 2 つのフィルタリング エリアが表示されます。
5. 虫眼鏡はクイック検索ボタンを表しており、現在のページに含まれている内容をすぐに見つけることができます。
6. リクエスト レコードを表示するためにより大きな領域を使用するかどうかを示します。私は大きなディスプレイが好きで、通常はオンにできます。
7. 概要サマリーを表示するかどうかを示します。このボタンがオンの場合のみ、5 つのタイムラインが表示されます。
8. フレームごとにグループ化。このオプションをチェックすると、次の図に示すように、ネットワーク リクエストがフォーム名ごとにグループ化されます。
9. 重要: Preserve log (ログを保持するかどうか) チェックすると、ページが更新された後もログが消えません (この機能は、ページがジャンプした後、その前にどのようなリクエストが行われたかを確認したい場合などに非常に便利です)ページ ジャンプ (他の人の 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 には、フィルター入力ボックスの右側にある regexp オプションを選択し、規則的なパターンを確認すると有効になります。
一般的なフィルター属性を以下の表に示します。
テキスト版:
ドメイン: 指定されたドメイン名のリクエストをフィルタリングします。自動補完だけでなく、* マッチングもサポートします。
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. メイン表示領域には、名前、ステータス、タイプ、イニシエーター、サイズ、時間、ウォーターフォール (ウォーターフォール分析) が含まれます。
名前: リクエストされたリソースの名前
ステータスHTTP: ステータスコード
タイプ: 要求されたリソースの MIME タイプ
イニシエーター: リクエストを開始するオブジェクトまたはプロセス
サイズ: サーバーから返された応答サイズ (ヘッダーとパッケージ本体を含む)。解凍されたサイズを表示できます。
時間: リクエストの開始からレスポンスの最後のバイトを受信するまでの合計時間
ウォーターフォール: 各リクエストに関連するアクティビティの直感的な分析グラフ
2. デフォルトでは、リクエスト リストはリソース リクエストが開始された時刻に従って昇順に並べられますが、指定した列で並べ替えて、関連するリスト ヘッダーをクリックすることもできます。
3. リソースの名前をクリックすると、リソースの詳細情報が表示されます。表示される情報は、選択したリソースの種類によって異なります。次のタブ情報が含まれる場合があります。
ヘッダー このリソースの HTTP ヘッダー情報。
[プレビュー] には、選択したリソース タイプ (JSON、画像、テキスト) に基づいて、対応するプレビューが表示されます。
応答には、HTTP 応答情報が表示されます。
Cookie リソース HTTP のリクエストおよびレスポンスプロセスにおける Cookie 情報を表示します。
タイミングは、リクエストのライフサイクル全体の各部分でリソースが費やす時間を示します。
上記 4 つのタブの各機能を詳しく説明します。
① リソースのHTTPヘッダー情報を表示する
「ヘッダー」タブでは、HTTP リクエスト URL、HTTP メソッド、ステータス コード、リモート アドレスなどの基本情報に加え、レスポンス ヘッダー、リクエスト ヘッダー、クエリ文字列パラメータやフォーム データなどの詳細情報も表示されます。
② リソースのプレビュー情報を表示する
Previewタグでは、選択したリソースタイプ(JSON、画像、テキスト、JS、CSS)に応じて、対応するプレビュー情報を表示できます。以下の図は、選択したリソースがJSON形式の場合のプレビュー情報を示しています。
③リソースHTTPの応答情報を参照する
Responseタグには、選択したリソースタイプ（JSON、画像、テキスト、JS、CSS）に応じて、対応するリソースのResponse内容（純粋な文字列）を表示できます。以下の画像は、選択したリソースが CSS 形式の場合の応答内容を示しています。
④ リソースCookie情報の表示
リクエストおよびレスポンスのプロセス中に選択したリソースに Cookie 情報がある場合、Cookie ラベルが自動的に表示され、すべての Cookie 情報を表示できます。
名前: クッキーの名前。
値: Cookie の値。
ドメイン: Cookie が属するドメイン名。
パス: Cookie が属する URL。
Expire/Max-Age: Cookie の生存時間。
サイズ: Cookie のバイト サイズ。
HTTP: Cookie はブラウザによってのみ設定でき、JS によって変更できないことを示します。
安全: Cookie が安全な接続経由でのみ送信できることを示します。
⑤ リクエストのライフサイクルにおけるリソース各部の消費時間情報を分析
Timing タグは、リクエスト ライフ サイクル全体におけるリソースの各部分の消費時間情報を表示できます。これには、次のプロセスに費やされた時間が含まれる場合があります。
キューイング キューに費やされた時間。レンダリング エンジンによってリクエストが比較的優先度の低いリソース (画像) であると見なされているか、サーバーが利用できないか、ブラウザの同時リクエストの最大数を超えている (Chrome の最大同時接続数は 6) ことが考えられます。
Stalled HTTP 接続が確立されてからリクエストを送信できる (実際にデータを送信できる) までにかかる時間。プロキシの処理にかかる時間を含め、接続が確立されている場合、この時間には、確立された接続が再利用されるまでの待機時間も含まれます。
プロキシ ネゴシエーション プロキシ サーバーへの接続に費やした時間。
DNS ルックアップ DNS ルックアップが実行された時刻。Web ページ上のすべての新しいドメイン名は DNS クエリを通過します。ブラウザに 2 回目の訪問時にキャッシュがある場合、この時間は 0 になります。
初期接続/接続中 TCP ハンドシェイクと再試行時間を含む、接続の確立にかかる時間。
SSL SSL ハンドシェイクが完了するまでにかかった時間。
送信されたリクエスト リクエストが開始された時刻。
待機時間 (最初のバイトまでの時間 (TTFB)) は、最初のネットワーク リクエストが開始されてからサーバーから最初のバイトを受信するまでの時間です。これには、TCP 接続時間、HTTP リクエストの送信時間、HTTP リクエストの取得時間などが含まれます。応答メッセージの最初の単語。
コンテンツ ダウンロード Response 応答データの取得にかかる時間。
TTFB のこの部分に費やされる時間が 200 ミリ秒を超える場合は、ネットワーク パフォーマンスの最適化を検討する必要があります。ネットワーク パフォーマンスの最適化計画と内部の関連リファレンス ドキュメントを参照してください。
リソースの発信元 (リクエストソース) と依存関係を表示する方法 (Shift キーを押したままにする)
Shift キーを押しながらリソース名の上にカーソルを移動すると、どのオブジェクトまたはプロセスがリソースを開始したか (リクエスト ソース)、およびリソースのリクエスト中にどのリソースがトリガーされたか (依存リソース) を表示できます。
リソースの上にある緑色でマークされた最初のリソースは、リソースのイニシエーター (リクエスト ソース) です。リソースのイニシエーターである緑色でマークされた 2 番目のリソースが存在する場合もあります。
このリソースの下に赤色でマークされているリソースは、このリソースの依存リソースです。
6. 情報概要エリア
情報サマリエリアには、[リクエスト数]、[データ転送量]、[ロード時間情報]などが表示されます。
DOMContentLoaded イベントは、ページ上の DOM が完全に読み込まれて解析された後にトリガーされ、CSS、画像、およびサブフレームが読み込まれるのを待ちません。DOMContentLoaded イベントは、概要では青色の縦線でマークされ、正確な時刻は概要では青色のテキストで表示されます。
ページ上のすべての DOM、CSS、JS、および画像が完全に読み込まれた後に、load イベントがトリガーされます。ロード イベントは、概要とリクエストのテーブルでも赤い縦線でマークされ、正確な時間も概要に赤いテキストで表示されます。
DOM ドキュメントの読み込みの読み込み手順と組み合わせると、DOMContentLoaded イベント/Load イベントのトリガー タイミングは次のようになります。
HTML 構造を解析します。
外部スクリプトとスタイルシート ファイルを読み込みます。
スクリプトコードを解析して実行します。// 一部のスクリプトはページの読み込みをブロックします
DOM ツリーが構築されます。//DOMContentLoaded イベント
画像などの外部ファイルを読み込みます。
ページが読み込まれます。//イベントをロード
7. コンソールコントロールエリア
この辺りはもともとF12で別のコラムでしたが、ネットワークと密接な関係があるため一つにまとめましたので、後ほど別項を設けてご紹介したいと思います。
Python を学習する過程で、良い学習教材がなかったり、時間内に解決できない問題に遭遇したりするため、多くの友人が学習を続けることができません。そのため、編集者はすべての人のために関連するソフトウェア ツールと基本的な Python チュートリアルを用意しました。ケースのソース コード、何百もの Python 電子ブック、Python 学習ロードマップがすべてパッケージ化されており、無料で入手できます~
記事の最後にある名刺の QR コードをスキャンするだけで、学習に関する質問をすることができます。
さて、今日の共有はこれで終わりです、また次回お会いしましょう~