ネットワーク リクエスト: ネットワーク リクエストをブロックまたはスロットリングしてサイトをテストする

Ewa Gasperowicz
X

[リクエスト条件] ドロワーを使用すると、画像やスタイルシートなどの特定のリソースが読み込まれない場合や、リソースの読み込みが遅い場合に、ページがどのように動作するかをテストできます。

概要

[リクエスト条件] ドロワーでは、複数のリソースまたは「パターン」を同時にブロックし、リストから切り替えることができます。[ネットワーク] パネルからネットワーク リクエストのドメインまたは URL をブロックすることもできます。その場合、対応するパターンが [リクエスト条件] ドロワーに表示されます。

[リクエスト条件] ドロワーでは、次のことができます。

  • パターンを追加または削除します。
  • パターンを編集します。
  • すべてのパターンを削除します。
  • ネットワーク リクエストのブロックまたはスロットリングを有効または無効にします。有効にすると、個々のパターンに対してブロックまたはスロットリングを切り替えることができます。

DevTools を閉じると、ネットワーク リクエストのブロックとスロットリングが無効になります。パネルを開いて、ブロックを再度有効にする必要があります。ただし、DevTools ではブラウザを閉じてもパターンが保存されます。

ネットワーク リクエストをブロックまたはスロットリングする

DevTools の [ネットワーク] パネルでネットワーク リクエストをブロックできます。

  1. [ネットワーク] パネルの [名前] セクションで、リクエストを右クリックして [リクエストをブロック] または [リクエストをスロットリング] を選択します。イメージ
  2. [リクエスト条件] ドロワーが自動的に開き、関連するパターンがブロックまたはスロットリングとして一覧表示されます。これにより、[ブロックとスロットリングを有効にする] チェックボックスも自動的にオンになります。

スロットリングまたはブロックされたリクエストを把握する

DevTools によってスロットリングされているリクエストと、処理が遅いリクエストを区別するには、[ネットワーク] パネルと [パフォーマンス] パネルを確認します。

[ネットワーク] パネルで次の操作を行います。

  • ブロックされたリクエスト: [ステータス] 列を確認します。ブロックされたリクエストは明示的に（blocked:devtools）と表示され、赤色で表示されます。
  • スロットリングされたリクエスト: リクエスト URL の横に金色または茶色のアイコンが表示されます。または、[時間] 列を確認することもできます。アイコンはタイミングの横に表示されます。
    • アイコンにカーソルを合わせると、適用されているネットワーク条件が正確に表示されます。
    • アイコンをクリックすると、[リクエスト条件] ドロワーがすぐに開き、スロットリングの原因となったルールがハイライト表示されます。

ブロックされたリクエストとスロットリングされたリクエストのインジケーターが表示された DevTools の [ネットワーク] パネル。

パフォーマンス パネル: パフォーマンス プロファイルを記録する際に、ネットワーク条件を探すこともできます。手順は次のとおりです。

  1. [パフォーマンス] パネルに移動して、録画をキャプチャします。
  2. [ネットワーク] トラックでリクエストを探します。
  3. リクエストにカーソルを合わせると、適用されたネットワーク条件の詳細を示すツールチップが表示されます。

リクエスト条件ドロワーを開く

[リクエスト条件] ドロワーを開くには:

  1. DevTools を開きます。
  2. 次のキーを押して、コマンド メニューを開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Control+Shift+P コマンド メニュー
  3. 「Request conditions」と入力し、[リクエスト条件を表示] を選択して、Enter キーを押します。DevTools ウィンドウの下部に [リクエスト条件] ドロワーが表示されます。

または、右上の [その他のツール] > [リクエスト条件] を選択します。

スロットリング設定を変更する

スロットリング設定をカスタマイズするには:

  1. [リクエスト条件] ドロワーを開き、特定のリクエストに移動します。
  2. [スロットリング] 列のプルダウン メニューからプリセット（低速 3G、高速 3G など）を選択します。カスタム ネットワーク プロファイルを追加することもできます。

リクエスト パターンを変更する

パターンを変更するには、[リクエスト条件] ドロワーで、パターンの横にある [] 編集ボタンをクリックして編集し、[保存] をクリックします。[条件を追加] ボタンをクリックして、新しい条件を作成することもできます。URL パターンを入力する際は、ワイルドカード（*）を使用して URL の動的な部分を照合できます。たとえば、*://example.com はそのドメインに対するすべての API リクエストに一致します。URL パターン API を使用して、ワイルドカードを使用して複数のリソースに一度に条件を適用できます。

ネットワーク リクエストのブロックを切り替える

[ を使用すると、すべてのパターンのネットワーク リクエストのブロックを一度に有効または無効にできます。

URL 一致パターンの順序を変更する

リクエストが複数のパターンに一致する場合、DevTools は最初に見つかったルールを適用します。この優先順位を制御するには、[リクエスト条件] ドロワーで特定のルールの横にある矢印ボタンをクリックして、優先度の高いルールをリストの先頭に移動します。

ネットワーク リクエストのブロック パターンを削除する

リストから特定のネットワーク リクエストのブロック パターンを削除するには:

  • [リクエスト条件] パネルで、[] 削除ボタンをクリックします。

ネットワーク リクエストのすべてのブロック パターンを削除するには、アクティビティ バーで [] [ネットワーク ブロック パターンをすべて削除] ボタンをクリックします。