次の方法で共有

ネットワーク要求ブロック ツール

  • [アーティクル]

ネットワーク要求ブロック ツールを使用して、イメージ ファイル、JavaScript ファイル、フォント、CSS スタイルシートなど、一部のリソースが使用できない場合の Web ページの外観と動作をチェックします。 このツールを使用して、指定した URL パターンに対するブロックネットワーク要求をテストし、Web ページの動作を確認します。

Web ページが HTML Web ページ以外の他のサーバーでホストされている 外部リソース に依存している場合、それらのサーバーが応答しないか、一部のユーザーが使用できない場合があります。 この場合、Web ページが依存するリソースの一部が Web ブラウザーによって取得されない可能性があります。 外部リソースの読み込みに失敗した場合の Web ページの動作をチェックすることが重要です。 Web ページが不足しているリソースを適切に処理するか、ユーザーに壊れているように見えるかをテストします。

ブロックされたネットワーク要求を作成し、Web ページをテストした後、ブロックされたネットワーク要求を編集または削除できます。

ネットワーク要求をブロックする

ネットワーク要求をブロックするには:

  1. ネットワーク要求をブロックする Web ページに移動します。 たとえば、新しいタブまたはウィンドウで アクセシビリティ テストのデモ ページ を開きます。 この Web ページには、 ネットワーク要求 ブロック ツールを使用してブロックする画像が含まれています。

  2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。

  3. DevTools の アクティビティ バーで、[ ネットワーク要求のブロック ] タブをクリックします。そのタブが表示されない場合は、[ その他のツール ] ([その他のツール] アイコン) ボタンをクリックします。

  4. [ パターンの追加] ([パターンの追加] アイコン) ボタンをクリックします。 [ ネットワーク要求のブロックを有効にする ] チェック ボックスが自動的にオンになります。

  5. [ 一致する要求をブロックするテキスト パターン ] テキスト ボックスに、「 *.jpg」と入力します。 これにより、JPEG イメージに対するすべての要求がブロックされます。

    次のいずれかの操作を実行できます。

    • 完全な URL を入力します。
    • このドメインからのすべての要求をブロックするには、ドメイン名のみを入力します。
    • ワイルドカード パターンマッチングの場合は、URL *の一部を に置き換えます。

    たとえば、 contoso.com 次のような URL と一致します。

    • https://contoso.com
    • https://subdomain.contoso.com
    • https://subdomain.contoso.com/path/to/resource

    次 *.jpg のような URL と一致します。

    • https://www.contoso.com/resource.jpg
    • http://third-party.com/6469272/163348534-b90ea1a3-c33cbeb1aed8.jpg

  6. [ 追加 ] ボタンをクリックします。

    新しい *.jpg ブロック パターンを示すネットワーク要求ブロック ツール

  7. ページを更新します。 すべての JPEG イメージがブロックされるため、レンダリングされた Web ページでは、各画像は "破損した画像" アイコンによって見つからないと示されます。 ブロックされたネットワーク要求の数は、 ネットワーク要求ブロック ツールで示されます。

    すべての JPEG イメージをブロックするネットワーク要求ブロック ツール

関連項目:

ブロックされたネットワーク要求を削除する

特定のネットワーク ブロッキング要求パターンを削除するには:

  • [ ネットワーク要求のブロック ] テーブルで、ネットワーク ブロック要求パターンにマウス ポインターを合わせ、[ 削除 ] (ブロックされた要求の削除アイコン) ボタンをクリックします。

    ブロックされた要求の削除

すべてのネットワーク ブロック要求を一度に削除するには:

  • ツール バーの [ すべてのパターンを削除する ] ([ブロックされたすべての要求を削除する] アイコン) ボタンをクリックします。

ブロックされたネットワーク要求を変更する

既存のブロックされたネットワーク要求を変更するには:

  • [ ネットワーク要求のブロック ] テーブルで、ブロックされているネットワーク要求にマウス ポインターを合わせ、[ 編集 ] (ブロックされた要求の編集アイコン) をクリックします。

    ブロックされた要求の編集

ネットワーク要求のブロックを切り替える

ブロックされているすべてのネットワーク要求を削除して再作成することなく、ネットワーク要求のブロックを切り替えるには:

  • ツール バーで、[ ネットワーク要求のブロックを有効にする ] チェック ボックスをオンまたはオフにします。

    ネットワーク要求ブロックの切り替え

ネットワーク ツールを使用してネットワーク要求をブロックする

ネットワーク要求ブロック ツールを使用するか、ネットワーク ツールを使用して、Web ページによって行われたネットワーク要求をブロックできます。

ネットワーク ツールを使用してネットワーク要求をブロックするには:

  1. ネットワーク要求をブロックする Web ページに移動します。 たとえば、新しいタブまたはウィンドウで アクセシビリティ テストのデモ ページ を開きます。

  2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  3. DevTools の アクティビティ バーで、[ ネットワーク ] タブをクリックします。そのタブが表示されない場合は、[ その他のツール ] ([その他のツール] アイコン) ボタンをクリックします。

  4. 下部のウィンドウのネットワーク要求の表で、ブロックするネットワーク要求を見つけます。

  5. ネットワーク要求を右クリックし、[ ブロック要求 URL ] をクリックしてこの特定のリソースをブロックするか、[ブロック 要求ドメイン] を クリックして同じドメインのすべてのリソースをブロックします。

    ネットワーク ツールからのブロック