From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/network_monitor/index.html | 61 ++++ .../performance_analysis/index.html | 32 ++ .../ja/tools/network_monitor/recording/index.html | 28 ++ .../network_monitor/request_details/index.html | 184 +++++++++++ .../tools/network_monitor/request_list/index.html | 337 +++++++++++++++++++++ .../ja/tools/network_monitor/throttling/index.html | 93 ++++++ files/ja/tools/network_monitor/toolbar/index.html | 48 +++ 7 files changed, 783 insertions(+) create mode 100644 files/ja/tools/network_monitor/index.html create mode 100644 files/ja/tools/network_monitor/performance_analysis/index.html create mode 100644 files/ja/tools/network_monitor/recording/index.html create mode 100644 files/ja/tools/network_monitor/request_details/index.html create mode 100644 files/ja/tools/network_monitor/request_list/index.html create mode 100644 files/ja/tools/network_monitor/throttling/index.html create mode 100644 files/ja/tools/network_monitor/toolbar/index.html (limited to 'files/ja/tools/network_monitor') diff --git a/files/ja/tools/network_monitor/index.html b/files/ja/tools/network_monitor/index.html new file mode 100644 index 0000000000..6a2d2aea2a --- /dev/null +++ b/files/ja/tools/network_monitor/index.html @@ -0,0 +1,61 @@ +--- +title: ネットワークモニター +slug: Tools/Network_Monitor +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools + - 'l10n:priority' +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

+ +

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

+ +

UI の概要

+ +

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

+ + + +

+ + + +

Performance analysis view

+ +

ネットワークモニタの操作

+ +

次の記事では、ネットワークモニタを使用するさまざまな側面について説明します。

+ + diff --git a/files/ja/tools/network_monitor/performance_analysis/index.html b/files/ja/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..5532efabec --- /dev/null +++ b/files/ja/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,32 @@ +--- +title: パフォーマンス分析 +slug: Tools/Network_Monitor/Performance_Analysis +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +

{{ToolsSidebar}}

+ +

ネットワークモニタにはパフォーマンス分析ツールが含まれており、ブラウザーがサイトのさまざまな部分をダウンロードするのに必要な時間を表示できます。

+ +

パフォーマンス分析ツールの使用

+ +

パフォーマンス分析ツールを実行するにはツールバーのストップウォッチアイコンをクリックします。

+ +

(また、ネットワークモニタを開いたばかりのときに、まだリクエストのリストが表示されていない場合は、メインウィンドウにストップウォッチアイコンが表示されます。)

+ +

その後、ネットワークモニタはサイトを2回読み込みます。1回は空のブラウザキャッシュ、もう1回はプライム付きブラウザキャッシュです。これはユーザーが初めてサイトを訪問し、その後の訪問をシミュレートします。 それぞれの実行結果を並べて表示するか、ブラウザウィンドウが狭い場合は垂直方向に表示します。

+ +

+ +

各実行結果は表と円グラフにまとめられています。テーブルはリソースをタイプ別にグループ化し、各リソースの合計サイズとそれらのロードに要した合計時間を表示します。付随する円グラフは、各リソースタイプの相対的なサイズを示しています。

+ +

ネットワークモニターのネットワークリクエストリストに戻るには、左側の「戻る」ボタンをクリックします。

+ +

円グラフのスライスをクリックすると、その実行のためのネットワークモニタが表示され、フィルタが自動的に適用されてそのリソースタイプのみが表示されます。

diff --git a/files/ja/tools/network_monitor/recording/index.html b/files/ja/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..e6f7ad6677 --- /dev/null +++ b/files/ja/tools/network_monitor/recording/index.html @@ -0,0 +1,28 @@ +--- +title: ネットワークモニターの記録 +slug: Tools/Network_Monitor/recording +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/recording +--- +

{{ToolsSidebar}}

+ +

一時停止ボタンを使用してネットワークトラフィックの監視を一時停止および再開できます。

+ +

ネットワークトラフィックの記録を一時停止および再開する

+ +

ネットワークモニタには、現在のページのネットワークトラフィックの記録を一時停止および再開するボタンがあります。これは、たとえば、デバッグ目的でページの安定したビューを取得しようとしているような状況で便利ですが、通常の状況下では永続的なネットワークリクエストによりビューが変化し続けます。一時停止ボタンを使用すると特定のスナップショットを見ることができます。

+ +

メインネットワークモニターツールバーの左端の方にボタンが見つかりますが、それは典型的なポーズボタン、つまり のように見えます。

+ +

あなたはコンテキストでそれをここで見ることができます：

+ +

+ +

押すたびに、ボタンが再生アイコンに変わり、もう一度押すと記録したネットワークトラフィックを切り替えることができます。

diff --git a/files/ja/tools/network_monitor/request_details/index.html b/files/ja/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..c8c41d4975 --- /dev/null +++ b/files/ja/tools/network_monitor/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: ネットワークリクエストの詳細 +slug: Tools/Network_Monitor/request_details +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/request_details +--- +

{{ToolsSidebar}}

+ +

リクエストの詳細ペインはリクエストリストのネットワークリクエストをクリックすると表示されます。このペインには、リクエストに関するより詳細な情報が表示されます。

+ +

ネットワークリクエストの詳細

+ +

行をクリックするとネットワークモニターの右側に新しいペインが表示され、リクエストに関するより詳細な情報が表示されます。

+ +

+ +

このペインの上部にあるタブを使用すると、次のページを切り替えることができます。

+ + + +

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

+ +

Headers

+ +

このタブには、リクエストに関する基本情報がリストされます。

+ +

+ +

これには次のものが含まれます：

+ + + +

表示されるヘッダをフィルタリングすることができます。

+ +

+ +

ステータスコード行の各ヘッダーの横に疑問符のアイコンが表示されます。これは HTTP ヘッダーの MDN ドキュメントで、特定のステータスコードに関する詳細情報へのリンクです。

+ +

Cookies

+ +

このタブには、リクエストまたはレスポンスとともに送信されたすべてのクッキーの詳細が一覧表示されます。

+ +

+ +

ヘッダーと同様に、表示されるクッキーのリストをフィルタリングできます。 Cookie属性の完全なリストが表示されます。レスポンスのクッキーの例の下のスクリーンショットを参照してください。

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

Firefox 62 ({{bug("1452715")}}) 以降、samesite 属性が表示されています。

+ +

パラメータ

+ +

このタブにはリクエストの GET パラメータと POST データが表示されます。

+ +

+ +

レスポンス

+ +

レスポンスの完全な内容。レスポンスが HTML、JS、または CSS の場合、テキストとして表示されます。

+ +

+ +

レスポンスが JSON の場合、検査可能オブジェクトとして表示されます。

+ +

+ +

レスポンスが画像の場合、タブにプレビューが表示されます。

+ +

+ +

キャッシュ

+ +

レスポンスがキャッシュされると(すなわち、304)、"Cache" タブにキャッシュされたリソースに関する詳細が表示されます。

+ +

+ +

詳細には次のものが含まれています:

+ + + +

HTML プレビュー

+ +

レスポンスが HTML の場合、レンダリングされた HTML のプレビューがレスポンスペイロードの上にある [Response] タブ内に表示されます。

+ +

+ +

タイミング

+ +

[タイミング] タブでは、ネットワークリクエストを、HTTP アーカイブ仕様で定義された次のサブセットに分解します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前説明
Blocked +

ネットワーク接続を待っているキューで費やされた時間。

+ +

ブラウザは、単一のサーバーに対して行うことができる同時接続の数に制限を設けています。Firefox のデフォルトは 6 ですが、network.http.max-persistent-connections-per-server の設定を使用して変更できます。すべての接続が使用中の場合、ブラウザは接続が解放されるまで、より多くのリソースをダウンロードすることはできません。

+
DNS resolutionホスト名を解決するのにかかる時間。
ConnectingTCP 接続を作成するのにかかる時間。
SendingHTTP リクエストをサーバーに送信するのにかかる時間。
Waitingサーバーからのレスポンスを待っています。
Receivingサーバー (またはキャッシュ) からのレスポンス全体を読み取るのにかかる時間。
+ +

それは、そのリクエストに対するタイムラインバーのより詳細な注釈付きのビューを提示します。これは、合計待ち時間がさまざまな段階にどのように分割されるかを示します。

+ +

+ +

セキュリティ

+ +

サイトが HTTPS 経由でサービスされている場合は、"Security" というラベルのタブが追加されます。これには、プロトコル、暗号スイート、証明書の詳細など、使用される安全な接続に関する詳細が含まれています。

+ +

+ +

[セキュリティ] タブには、セキュリティの弱点に関する警告が表示されます。 現在、2つの弱点について警告しています。

+ +
    +
  1. Using SSLv3 instead of TLS
    2. +
  2. Using the RC4 cipher
    3. +
+ +

+ +

スタックトレース

+ +

Stack Trace タブには、スタックトレースがあるレスポンスのスタックトレースが表示されます。

+ +

diff --git a/files/ja/tools/network_monitor/request_list/index.html b/files/ja/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..ffc68317a5 --- /dev/null +++ b/files/ja/tools/network_monitor/request_list/index.html @@ -0,0 +1,337 @@ +--- +title: ネットワークリクエストリスト +slug: Tools/Network_Monitor/request_list +tags: + - '110n:priority' +translation_of: Tools/Network_Monitor/request_list +--- +

{{ToolsSidebar}}

+ +

ネットワークモニターのリクエストリストには、ページのロード中に行われたすべてのネットワークリクエストの一覧が表示されます。

+ +

ネットワークリクエストリスト

+ +

デフォルトでは、ネットワークモニタにはページの読み込み中に行われたすべてのネットワークリクエストの一覧が表示されます。各リクエストはそれ自身の行に表示されます：

+ +

+ +

デフォルトでは、新しいページに移動するか現在のページをリロードするたびに、ネットワークモニタがクリアされます。設定の [永続ログを有効にする] をオンにするとこの動作を無効にすることができます。

+ +

ネットワークリクエスト列

+ +

テーブルヘッダーを右クリックし、コンテキストメニューから特定の列を選択することによって、異なる列を切り替えることができます。"Reset Columns" オプションで初期設定に戻すこともできます。使用可能なすべての列のリストは次のとおりです。

+ + + +

上部のツールバーはこれらの列にラベルを付け、ラベルをクリックするとその列によるすべての要求がソートされます。

+ +

イメージサムネイル

+ +

ファイルがイメージの場合、行にはイメージのサムネイルが含まれ、ファイル名の上にマウスを置くとツールチップのプレビューが表示されます。

+ +

+ +

セキュリティアイコン

+ +

ネットワークモニタは [ドメイン] 列にアイコンを表示します。

+ +

+ +

これによりリクエストのセキュリティステータスに関する追加情報が得られます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
アイコン意味
HTTPS
弱い HTTPS (例えば、弱い暗号が使用された場合)
失敗した HTTPS (たとえば、証明書が無効だった場合)
HTTP
Localhost
URL がコンテンツブロッキングを有効にしてブロックされる既知のトラッカーに属していることを示します。
+ +

弱い HTTPS リクエストと失敗した HTTPS リクエストについては、[セキュリティ]タブに問題の詳細が表示されます。

+ +

原因列

+ +

「原因」列には、リクエストの原因を示します。これは通常かなり明白であり、一般的にこれとタイプの列項目との間の相関を見ることができます。最も一般的な値は次のとおりです。

+ + + +

タイムライン

+ +

リクエストリストには、各リクエストのさまざまな部分のタイムラインも表示されます。

+ +

+ +

各タイムラインには、その行の他のネットワークリクエストに対する相対的な水平位置が与えられているため、ページのロードに要した合計時間を確認できます。ここで使用される色分けの詳細については、タイミングページのセクションを参照してください。

+ +

Firefox 45 以降、タイムラインには 2 つの垂直線も含まれています：

+ + + +

リクエストのフィルタリング

+ +

リクエストをコンテンツタイプ、XMLHttpRequests リクエスト、WebSocket リクエスト、URL、リクエストプロパティ別のいずれかでフィルタリングできます。

+ +

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

+ +

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

+ +

XHRのフィルタリング

+ +

{{Glossary("XHR (XMLHttpRequest)", "XHR")}} のみを表示するには、ツールバーの "XHR" ボタンを使用します。

+ +

WebSocketsのフィルタリング

+ +

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

+ +

WebSocket 接続で交換されるデータを監視するには、WebSocket Monitor アドオンを試してください。

+ +

URLによるフィルタリング

+ +

URL でフィルタリングするには、ツールバーの検索ボックスを使用します。検索ボックスの中をクリックするか、あるいは Ctrl + F (または Mac の場合は Cmd + F )を押して、入力を開始します。ネットワークリクエストのリストは、フィルタ文字列を含むリクエストのみをドメインまたはファイルの部分に含めるようにフィルタリングされます。

+ +

Firefox 45 では、クエリ文字列に "-" 演算子をつけることでフィルタ文字列を含まないリクエストをフィルタリングできます。たとえば、"-google.com" というクエリでは、URL に "google.com" がないすべてのリクエストが表示されます。

+ +

プロパティによるフィルタリング

+ +

特定のリクエストプロパティでフィルタリングするには、ツールバーの検索ボックスを使用します。検索ボックスは特定のキーワードを認識し、特定のリクエストプロパティによってリクエストをフィルタリングするために使用できます。これらのキーワードの後にコロンと関連するフィルター値が続きます。フィルター値は大文字と小文字を区別しません。マイナス (-) を前に付けると、フィルタは無効になります。異なるフィルタをスペースで区切って組み合わせることができます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード意味例
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 はメガバイトに使用できます。例えば 1k の値は 1024 に相当します。transferred:1k
size +

特定のサイズ (圧縮解除後) または指定されたサイズに近いサイズのリソースを表示します。k はキロバイトの接尾辞として、m はメガバイトに使用できます。1k の値は 1024 に相当します。

+ 		size:2m
larger-than指定したサイズ (バイト単位) を超えるリソースを表示します。k はキロバイトの接尾辞として、m はメガバイトに使用できます。1k の値は 1024 に相当します。larger-than:2000
+ -larger-than:4k
mime-type指定された MIME タイプに一致するリソースを表示します。mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached および is: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指定された {{Glossary("regular expression")}} と一致する URL を持つリソースを表示します。regexp:\d{5}
+ regexp:mdn|mozilla
+ +

コンテキストメニュー

+ +

リスト内の行の"コンテキストクリック"は、次のオプションを含むコンテキストメニューを表示します。

+ + + +

Edit and Resend

+ +

このオプションを使用すると、リクエストのメソッド、URL、パラメータ、およびヘッダーを編集し、リクエストを再送信できるエディタが開きます。

+ +

新規タブで開く

+ +

リクエストを新しいタブで再送信します。非同期リクエストのデバッグには非常に便利です。

+ +

Copy as cURL

+ +

このオプションはネットワークリクエストを cURL コマンドとしてクリップボードにコピーするので、コマンドラインから実行することができます。 このコマンドには、次のオプションが含まれます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]メソッドが GET または POST でない場合
--dataURL エンコードされたリクエストパラメータ
--data-binaryマルチパートリクエストパラメータの場合
--http/VERSIONHTTP バージョンが 1.1 でない場合
-Iメソッドが HEAD の場合
-H +

各リクエストヘッダーごとに1つ。

+ +

Firefox 34から、"Accept-Encoding" ヘッダが存在する場合、cURL コマンドに -H "Accept-Encoding: gzip, deflate" の代わりに --compressed が含まれます。これは、レスポンスが自動的に解凍されることを意味します。

+
+ +

Copy/Save All As HAR

+ +

これらのオプションはリストされたすべての要求に対して HTTP アーカイブ (HAR) を作成します。HAR 形式を使用すると、ネットワークリクエストに関する詳細情報をエクスポートできます。'Copy All As HAR' はデータをクリップボードにコピーし、'Save All As HAR' はアーカイブをディスクに保存するダイアログを開きます。

+ +

Firefox 61 以降では、これらのオプションを簡単に発見できるようにツールバーメニューを追加しました ({{bug(1403530)}})。新しい 'HAR' ドロップダウンメニューには、'Copy All As HAR' コマンドと 'Save All As HAR' コマンドの両方と、'Import...' オプションがあります。

+ +

diff --git a/files/ja/tools/network_monitor/throttling/index.html b/files/ja/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..92b46a0b78 --- /dev/null +++ b/files/ja/tools/network_monitor/throttling/index.html @@ -0,0 +1,93 @@ +--- +title: スロットリング +slug: Tools/Network_Monitor/Throttling +tags: + - '110n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

ネットワークモニタを使用するとネットワーク速度を調整してさまざまな接続速度をエミュレートすることができるため、アプリケーションがさまざまな接続タイプでどのように動作するかを確認できます。

+ +

スロットリング

+ +

ツールバーにはさまざまなネットワーク速度条件をエミュレートするためにネットワーク速度を抑制することを可能にする Throttling ドロップダウンが含まれています。メニューからオプションを選択するだけで、リロードしても維持されます。

+ +

+ +

エミュレートされる特性は次のとおりです。

+ + + +

以下の表は各ネットワークタイプに関連する数値を示していますが、正確な性能測定にはこの機能を使用しないでください。さまざまな条件でのユーザーエクスペリエンスの概算を示すことを意図しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Selectionダウンロード速度アップロード速度最小レイテンシー (ms)
GPRS50 Kb/s20 Kb/s500
Regular 2G250 Kb/s50 Kb/s300
Good 2G450 Kb/s150 Kb/s150
Regular 3G750 Kb/s250 Kb/s100
Good 3G1.5 Mb/s750 Kb/s40
Regular 4G/LTE4 Mb/s3 Mb/s20
DSL2 Mb/s1 Mb/s5
Wi-Fi30 Mb/s15 Mb/s2
diff --git a/files/ja/tools/network_monitor/toolbar/index.html b/files/ja/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..35aa0ce0a1 --- /dev/null +++ b/files/ja/tools/network_monitor/toolbar/index.html @@ -0,0 +1,48 @@ +--- +title: ネットワークモニターツールバー +slug: Tools/Network_Monitor/toolbar +tags: + - '119n:priority' + - Dev Tools + - Firefox + - ガイド + - ツール + - デバッグ + - ネットワーク +translation_of: Tools/Network_Monitor/toolbar +--- +

{{ToolsSidebar}}

+ +

ネットワークモニタには2つのツールバー領域があり、1つはメインセクションの上に、もう１つは下にあります。

+ +

ツールバー

+ +

ツールバーは、メインネットワークモニタウィンドウの上部にあります。

+ +

+ +

It provides:

+ + + +

+ +

ネットワークモニタの下部にある2番目のツールバー領域には、次の項目があります。

+ + -- cgit v1.2.3-54-g00ecf