MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ネットワークモニター

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

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

Firefox 55 でキーボードショートカットが変わりました。

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

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

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

UI の概要

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

Performance analysis view

ツールバー

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

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

  • ネットワーク要求のリスト をクリアするアイコン
  • ネットワーク要求のリストをタイプ別にフィルタリングするアイコン群:
    • 応答のコンテンツタイプ
    • XHR リクエスト
    • (Firefox 48 の新機能) WebSocket のアップグレード (WS と表示)
  • パフォーマンス解析 を開始するアイコン
  • 要求数、合計サイズ、合計時間といった、ページの概要
  • 要求を URL特性 でフィルタリングできる入力ボックス
  • ネットワーク要求の詳細ペイン を表示または隠すアイコン

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

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

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

ネットワーク要求の列

Firefox 55 より、票の見出しを右クリックしてコンテキストメニューで特定の列を選択すると、さまざまな列の表示・非表示を切り替えできます。"Reset Columns" で、表示する列を初期設定に戻すこともできます。表示可能な列は以下のとおりです:

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

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

画像のサムネイル

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

セキュリティアイコン

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

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

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

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

発生源

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

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

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

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

タイムライン

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

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

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

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

要求のフィルタリング

コンテンツタイプ、XMLHttpRequests や WebSocket 要求であるか、URL、要求の特性によって、要求をフィルタリングできます。

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

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

XHR をフィルタリングする

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

WebSockets をフィルタリングする

Firefox 48 の新機能

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

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

URL によるフィルタリング

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

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

特性によるフィルタリング

Firefox 55 の新機能

要求の具体的な特性でフィルタリングするには、ツールバー の検索ボックスを使用します。検索ボックスは、要求の具体的な特性で要求をフィルタリングできる、特定のキーワードを認識します。これらのキーワードの後に、コロンと関連するフィルター値を記入します。フィルター値は、大文字・小文字を区別せずにマッチします。マイナス (-) を前につけると、否定のフィルターになります。空白区切りで、さまざまなフィルターを組み合わせることができます。

キーワード 意味
status-code 特定の HTTP ステータスコードを持つ要求を表示します。 status-code:304
method 特定の HTTP 要求メソッドで要求されたリソースを表示します。 method:post
domain 特定のドメインから到着したリソースを表示します。 domain:mozilla.org
remote-ip 特定の IP アドレスを持つサーバーから到着したリソースを表示します。 remote-ip:63.245.215.53
remote-ip:[2400:cb00:2048:1::6810:2802]
cause 特定の発生源に一致するリソースを表示します。発生源の種類は、発生源列 の説明で確認できます。 cause:js
cause:stylesheet
cause:img
transferred 転送量が特定のサイズである、または転送量が指定したサイズに近いリソースを表示します。キロバイトを表す接尾辞として k、メガバイトを表す接頭辞として m を使用できます。例えば 1k1024 と等価です。 transferred:1k
size (圧縮を展開した後のサイズが) 特定のサイズである、または指定したサイズに近いリソースを表示します。キロバイトを表す接尾辞として k、メガバイトを表す接頭辞として m を使用できます。例えば 1k1024 と等価です。 size:2m
larger-than バイト単位で指定した値より大きなサイズのリソースを表示します。キロバイトを表す接尾辞として k、メガバイトを表す接頭辞として m を使用できます。例えば 1k1024 と等価です。 larger-than:2000
-larger-than:4k
mime-type 特定の MIME タイプに一致するリソースを表示します。 mime-type:text/html
mime-type:image/png
mime-type:application/javascript
is is:cachedis:from-cache で、キャッシュから取得したリソースのみ表示します。
is:running で、現在転送中のリソースのみ表示します。
is:cached
-is:running
scheme 指定したスキームで転送されたリソースを表示します。 scheme:http
has-response-header 特定の HTTP 応答ヘッダーを持つリソースを表示します。 has-response-header:cache-control
has-response-header:X-Firefox-Spdy
set-cookie-domain Domain 属性が指定した値に一致する Set-Cookie を持つリソースを表示します。 set-cookie-domain:.mozilla.org
set-cookie-name 名前が指定した値に一致する Set-Cookie を持つリソースを表示します。 set-cookie-name:_ga
set-cookie-value 値が指定した値に一致する Set-Cookie を持つリソースを表示します。 set-cookie-value:true
regexp 指定した 正規表現 にマッチする URL を持つリソースを表示します。 regexp:\d{5}
regexp:mdn|mozilla

コンテキストメニュー

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

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

編集して再送信

この項目は要求のメソッド、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 である場合に限る) (Firefox 55 で削除)

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

ヘッダー

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

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

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

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

Firefox 54 の新機能

それぞれのヘッダーの隣に、HTTP ヘッダーのドキュメント を開く [詳細情報] リンクがあります。

Cookie

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

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

パラメーター

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

応答

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

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

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

タイミング

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

名称 説明
ブロック

ネットワーク接続の待ち行列で費やした時間。

ブラウザーは、ひとつのサーバーへ同時に行える接続数を制限しています。Firefox の既定値は 6 ですが、設定項目 network.http.max-persistent-connections-per-server を使用して変更できます。すべての接続を使用しているときは、接続が解放されるまでそれ以上リソースをダウンロードできません。

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

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

暗号化

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

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

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

プレビュー

Firefox 55 で削除しました。

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

パフォーマンス解析

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

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

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

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

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

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

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

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

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