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

Dale St. Marthe
Dale St. Marthe

[ネットワーク リクエストのブロック] パネルでは、特定のリソース(画像やスタイルシートなど)が読み込まれなかった場合のページの動作をテストします。

概要

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

[ネットワーク リクエストのブロック] パネルでは、次のことができます。

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

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

ネットワーク リクエストのブロック パネルを開く

[ネットワーク リクエストのブロック] パネルを開くには:

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

または、右上の more_vert その他のオプション > [その他のツール] > [ネットワーク リクエストのブロック] を選択します。

ネットワーク リクエストをブロックする

ネットワーク リクエストをブロックする方法は 2 つあります。1 つ目:

  1. [ネットワーク リクエストのブロック] パネルで、[パターンを追加] をクリックします。入力ボックスが表示され、[一致するリクエストをブロックするテキスト パターン] を入力するよう求められます。

    次のいずれかを入力できます。

    • 完全な URL。
    • ワイルドカード パターン マッチング用のアスタリスク「*」を含む部分 URL。
    • ドメイン名。これにより、このドメインを含むすべてのリクエストがブロックされます。
  2. [追加] をクリックし、[ネットワーク リクエストのブロックを有効にする] チェックボックスがオンになっていることを確認します。

  3. ページを再読み込みします。[ネットワーク リクエストのブロック] パネルのパターンの横に、ブロックされたリクエストの数が表示されます。

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

  1. [ネットワーク] パネルの [名前] セクションで、リクエストを右クリックし、[リクエスト URL をブロック] または [リクエスト ドメインをブロック] を選択します。 イメージ
  2. [ネットワーク リクエストのブロック] パネルが自動的に開き、関連するパターンがブロック済みとして一覧表示されます。
  3. [ネットワーク リクエストのブロックを有効にする] チェックボックスがオンになっていることを確認します。
  4. ページを再読み込みすると、対応するパターンの横にブロックされたリクエストの数が表示されます。

ブロックされたリクエストの数は、リクエストの数が増えると更新される可能性があります。ページを更新すると、数値がリセットされます。

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

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

  • [ネットワーク リクエストのブロック] パネルでパターンにカーソルを合わせます。
  • 削除の [削除] ボタンをクリックします。

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

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

パターンを変更するには、[ネットワーク リクエストのブロック] パネルでパターンの横にある [編集] [編集] ボタンをクリックして編集し、[保存] をクリックします。

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

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