Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
開発ツール
検索結果

    ネットワークモニター

    ネットワークモニターは、Firefox が実行したすべてのネットワーク要求 (たとえばページの読み込みや XMLHttpRequests による) について、各要求でどれだけ時間がかかったかや要求の詳細情報を表示します。

    ネットワークモニターを開く

    ネットワークモニターを開く方法がいくつかあります:

    • Ctrl + Shift + Q (Mac では Command + Option + Q) を押下します。
    • "Web 開発" メニュー (OS X や Linux では、"ツール" メニューのサブメニューです) で、"ネットワーク" を選択します。
    • メインツールバーまたはハンバーガーメニュー () の中にあるレンチのアイコン () をクリックして、"ネットワーク" を選択します。

    ブラウザウィンドウの下部にネットワークモニターが現れます。要求を見るために、ページを再読み込みしましょう:

    ツールバーを開いているときは、ネットワークモニターを選択していなくても常にネットワーク要求を記録します。つまり、例えば Web コンソールを開いてページをデバッグした後、ページを再読み込みすることなくネットワークモニターに切り替えて、ネットワークアクティビティを確認できます。

    UI の概要

    UI は 4 つの主要な部分に分けられます:

    ツールバー

    Firefox 47 より、ツールバーはメインウィンドウの上部にあります。これより前のバージョンの Firefox では、下部にあります。

    ツールバーの機能は以下のとおりです:

    ネットワーク要求のリスト

    ネットワークモニターは既定の状態で、ページを読み込んでいる間に実行したすべてのネットワーク要求を一覧表示します。それぞれの要求は、個別の行で表示します:

    デフォルトでは、新しいページに移動したり現在のページを再読み込みしたりするたびにネットワークモニターの内容が消去されます。 オプション で "ログ出力を残す" にチェックを入れると、この動作を変更できます。

    ネットワーク要求フィールド

    それぞれの行の表示内容は以下のとおりです:

    • 状態: 返された HTTP ステータスコードです。これは色分けされたアイコンで表示します:
      • 青色の丸印は情報 (1XX コード)。特に、WebSocket のアップグレードとしての 101 (switching protocols) を含みます。
      • 緑色の丸印は成功 (2XX コード)
      • 橙色の三角印はリダイレクト (3XX)
      • 赤色の四角印はエラー (4XX および 5XX)
      • 灰色の白抜き丸印は、ブラウザーのキャッシュから取得した応答を表します
      コードそのものは、アイコンの直後に表示します。
    • メソッド: HTTP 要求メソッド
    • ファイル: 要求したファイルのベースネーム
    • ドメイン: 要求したパスのドメイン。
      • SSL/TLS を使用する要求で暗号が弱いなどセキュリティの弱点が存在する接続である場合に、警告マークをドメインの隣に表示します。この問題に関する詳細情報は、 暗号化タブ で確認できます。
      • ドメインにマウスポインターを載せると IP アドレスを表示します。
      • リクエストのセキュリティ状態の情報を提供するアイコンを、ドメイン名の隣に表示します。セキュリティアイコン をご覧ください。
    • Cause: XHR リクエスト、<img>、スクリプト、スクリプトが要求した画像など、ネットワーク要求が発生した理由。これは Firefox 49 の新機能です。
    • タイプ: 応答の Content-type
    • 転送量: リソースの読み込みで実際に転送されたバイト数。リソースが圧縮されている場合は、サイズより小さくなります。Firefox 47 より、Service Worker キャッシュから取得したリソースである場合は "service worker" と表示します。
    • サイズ: 展開処理後の、リソースのサイズ

    上段のツールバーはこれらの列のラベルであるとともに、ラベルをクリックするとすべての要求を、指定した列で並べ替えします。

    画像のサムネイル

    ファイルが画像である場合は、行内に画像のサムネイルを表示します。またファイル名にマウスポインターを載せると、ツールチップでプレビューを表示します:

    セキュリティアイコン

    ネットワークモニターでドメイン列にアイコンを表示します:

    これは、リクエストのセキュリティ状態の情報を提供するものです。

    アイコン 意味
    HTTPS
    弱い HTTPS (例えば、弱い暗号を使用している)
    問題がある HTTPS (例えば、証明書が無効)
    HTTP
    ローカルホスト

    弱い HTTPS や問題がある HTTPS のリクエストでは、詳しい問題点を 暗号化タブ で確認できます。

    Cause 列

    Cause 列は、何がリクエストを発生させたかを示します。これは通常、かなり明らかであり、また一般的に、この項目とタイプ列の項目に相関性がみられます。もっとも一般的な値は以下のとおりです:

    • document: ソース HTML ドキュメント
    • img: <img> 要素
    • imageset: <img> 要素
    • script: JavaScript ファイル
    • stylesheet: CSS ファイル

    JavaScript によってリクエストが発生したとき、Cause 列の項目の左側に、小さな JS アイコンを表示します。アイコンにマウスポインターを載せると、なぜリクエストが発生したかの手がかりを提供するために、リクエストに関するスタックトレースをポップアップ表示します。

    ポップアップ内のいずれかの項目をクリックすると、関連するスクリプトを デバッガー ペインで開くことができます。

    タイムライン

    要求リストでは、各要求のさまざまな段階を示すタイムラインも表示します。

    それぞれのタイムラインは、行内での水平方向の位置が他のネットワーク要求に対して相対的になるように並びますので、ページの読み込みにかかった合計時間を知ることができます。タイムラインで使用している色分けについて詳しくは、 タイミング のセクションをご覧ください。

    Firefox 45 より、タイムライン上に 2 本の垂直線を表示します:

    • 青色の線は、ページの DOMContentLoaded イベントが発生したときを示します。
    • 赤色の線は、ページの load イベントが発生したときを示します。

    要求のフィルタリング

    コンテンツタイプまたは URL で、要求をフィルタリングできます。

    コンテンツタイプによるフィルタリング

    コンテンツタイプでフィルタリングするには、 ツールバー 上のボタンを使用します。

    XHR をフィルタリングする

    XHR 要求のみ表示するには、ツールバー の "XHR" ボタンを使用します。

    WebSockets をフィルタリングする

    Firefox 48 の新機能

    WebSocket 接続のみ表示するには、 ツールバー の "WS" ボタンを使用します。

    WebSocket 接続でやり取りしたデータをモニタリングするには、WebSocket Monitor アドオンをお試しください。

    URL によるフィルタリング

    URL でフィルタリングするには、 ツールバー 上の検索ボックスを使用します。検索ボックスをクリックするか Ctrl または Cmd + F を押下して、入力してください。ドメインまたはファイル名の部分に、入力したフィルタ文字列が含まれる要求のみ表示するように、ネットワーク要求の一覧をフィルタリングします。

    Firefox 45 より "-" を接頭辞として付加すると、フィルタ文字列を含まない要求を表示するようにフィルタリングできます。例えばフィルタ文字列 "-google.com" は、URL に "google.com" を含まないすべての要求を表示します。

    コンテキストメニュー

    リスト内の行をコンテキストクリックすると、以下の項目を持つコンテキストメニューを表示します:

    • URL をコピー
    • URL パラメーターをコピー (Firefox 40 の新機能)
    • POST データをコピー (Firefox 40 の新機能、POST 要求のみ)
    • cURL としてコピー
    • 要求ヘッダーをコピー (Firefox 40 の新機能)
    • 応答ヘッダーをコピー (Firefox 40 の新機能)
    • 応答をコピー (Firefox 40 の新機能)
    • 画像をデータ URI としてコピー (画像のみ)
    • HAR 形式ですべてコピー (Firefox 41 の新機能)
    • HAR 形式ですべて保存 (Firefox 41 の新機能)
    • 編集して再送信
    • 新しいタブで開く
    • パフォーマンス解析 を開始します

    編集して再送信

    この項目は要求のメソッド、URL、パラメーター、ヘッダーを編集して再送信できるエディターを開きます。

    cURL としてコピー

    この項目はネットワーク要求を cURL コマンドとしてクリップボードにコピーしますので、コマンドラインで要求を実行できます。コマンドは以下のオプションを含む場合があります:

    -X [METHOD] メソッドが GET と POST のどちらでもない場合
    --data URL エンコードされた要求パラメーターのため
    --data-binary マルチパートの要求パラメーターのため
    --http/VERSION HTTP のバージョンが 1.1 ではない場合
    -I メソッドが HEAD である場合
    -H

    要求ヘッダーごとに 1 つ付加する。

    Firefox 34 より "Accept-Encoding" ヘッダーが現れる場合は、cURL コマンドへ -H "Accept-Encoding: gzip, deflate" に代わり --compressed を持たせます。これは、応答が自動的に展開されることを表します。

    HAR 形式ですべてコピー/保存

    Firefox 41 の新機能

    この項目は、すべての要求を一覧化した HTTP Archive (HAR) を作成します。HAR 形式で、ネットワーク要求の詳細情報をエクスポートできます。'HAR 形式ですべてコピー' はデータをクリップボードにコピー、'HAR 形式ですべて保存' はアーカイブをディスクに保存するためのダイアログを開きます。

    ネットワーク要求の詳細

    行をクリックすると、新しいペインがネットワークモニターの右側に開きます。ここでは要求に関する詳細情報を表示します。

    ペイン上部にあるタブで、以下のページを切り替えできます:

    • ヘッダー
    • Cookie
    • パラメーター
    • 応答
    • タイミング
    • 暗号化 (セキュアなページに限る)
    • プレビュー (コンテンツタイプが HTML である場合に限る)

    ツールバー の右端にあるアイコンをクリックすると、詳細ペインを閉じてリストビューに戻ります。

    ヘッダー

    このタブでは、要求に関する基本情報を一覧表示します:

    以下の情報を表示します:

    • 要求 URL
    • 要求メソッド
    • リモート IP アドレスとポート (Firefox 39 の新機能)
    • ステータスコード
    • 送信した HTTP 要求ヘッダーと受け取った応答ヘッダー
    • 要求を 編集して再送信 するボタン

    表示するヘッダーの絞り込みが可能です:

    Cookie

    このタブでは、要求または応答とともに送信した Cookie の詳細情報を一覧表示します:

    ヘッダーと同様に、表示する Cookie の絞り込みが可能です。

    パラメーター

    このタブでは、要求の GET パラメーターや POST データを表示します:

    応答

    応答の完全なコンテンツです。応答が HTML、JS、CSS である場合は、それらをテキストで表示します:

    応答が JSON である場合は、確認可能なオブジェクトとして表示します。

    応答が画像である場合は、プレビューを表示します:

    タイミング

    タイミングタブではネットワーク要求を、HTTP Archive 仕様で定義している段階のサブセットに分割します:

    名称 説明
    DNS 解決 ホスト名の解決に要した時間。
    接続 TCP 接続の確立に要した時間。
    送信 サーバーへ HTTP 要求を送信するために要した時間。
    待機 サーバーから応答が返るまでの待ち時間。
    受信 サーバー(またはキャッシュ) から応答全体を読み取るのに要した時間。

    総待ち時間がさまざまな段階へどのように分けられるかを示した、詳細かつ注釈付きのタイムラインバーを提供します。

    暗号化

    HTTPS で配信するサイトである場合に、"暗号化" タブを表示します。このタブにはプロトコル、暗号アルゴリズム、証明書情報といった、セキュアな接続に関する詳細情報が含まれます:

    暗号化タブでは、セキュリティの弱点の警告も表示します。現在は 2 つの弱点について警告します:

    1. TLS ではなく SSLv3 を使用する
    2. RC4 暗号を使用する

    プレビュー

    ファイルの種類が HTML である場合に、"プレビュー" タブが現れます。ここでは HTML のみを表示します:

    パフォーマンス解析

    ネットワークモニターにパフォーマンス解析ツールを内蔵しました。これはブラウザーがサイトのさまざまな部品をダウンロードするために、どれだけ時間をかけたかを表示します。

    パフォーマンス解析ツールを実行するには、ツールバー でストップウォッチのアイコンをクリックしてください。

    (またはネットワークモニターを開いただけで、まだ要求リストが埋められていない場合は、メインウィンドウ内にストップウォッチのアイコンがあります)

    ネットワークモニターはサイトを 2 回読み込みます。1 回はブラウザーのキャッシュがない状態、もう 1 回はブラウザーのキャッシュがある状態です。これはユーザーが最初にサイトを訪れたときと、後に再び訪れたときをシミュレーションします。それぞれの結果は左右に並べて、あるいはブラウザーのウィンドウの幅が狭い場合は上下に並べて表示します:

    それぞれの実行結果は、表と円グラフでまとめます。表ではリソースをタイプごとにグループ化して、各リソースの合計サイズと読み込みにかかった時間の合計を表示します。付属する円グラフでは、各リソースタイプのサイズを相対的に表示します。

    ネットワークモニターのネットワーク要求一覧に戻るには、左側の "戻る" ボタンをクリックしてください。

    円グラフの断片をクリックすると、 そのリソースタイプのみ表示する よう自動的にフィルタリングしたネットワークモニターに切り替わります。

    ドキュメントのタグと貢献者

    タグ: 
     このページの貢献者: SatoshiOhata, yyss, Uemmra3
     最終更新者: SatoshiOhata,