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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

[ネットワーク リクエストのブロック] パネルを使用すると、複数のリソースまたは「パターン」を同時にブロックして、リストで表示できます。[ネットワーク] パネルで、ネットワーク リクエストのドメインや 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. [ネットワーク リクエストのブロック] パネルで、[パターンを追加] をクリックします。入力ボックスが表示され、一致するリクエストをブロックするテキスト パターンの入力を求められます。

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

    • 完全な URL。
    • ワイルドカード パターン マッチング用のアスタリスク「*」付きの部分的な URL。
    • ドメイン名。これにより、このドメインを含むすべてのリクエストがブロックされます。

  2. [追加] をクリックし、[ネットワーク リクエストのブロックを有効にする] チェックボックスがオンになっていることを確認します。

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

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

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

ブロックされるリクエストの数は、リクエストの数が増えるにつれて更新される場合があります。ページを更新すると、数字がリセットされます。

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

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

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

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

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

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

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

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