個々のネットワーク リクエストをスロットリングする

[リクエスト条件] タブを使用して、特定の URL をブロックしたり、カスタム ネットワーク スロットリング プロファイルを個々のリソースに適用したりします。

概要

以前の Chrome DevTools では、セッション全体でネットワーク条件をグローバルに調整（すべてのリクエストに影響）するか、特定のリクエストを完全にブロックすることができました。しかし、ページ全体を遅くすることなく、レイテンシに苦労しているサードパーティ API や、低速接続で読み込まれる大きなヒーロー画像など、特定の遅いリソースをアプリケーションがどのように処理するかをテストすることは困難でした。

Chrome 144 以降では、DevTools で個々のリクエストのスロットリングがサポートされるようになりました。既存のブロック機能に加えて、特定のネットワーク条件を適用するネットワーク リクエストを個別に選択できるようになりました。この機能により、以前は [ネットワーク リクエストのブロック] ドロワーにあった機能が、より包括的な新しい [リクエスト条件] ドロワーに移動します。この機能は、サイト全体ではなくリクエストされたリソースのみを遅くするため、より正確で、デバッグを高速化できます。

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

特定のリソースをブロックまたはスロットリングするには、[ネットワーク] パネルで任意のリクエストを右クリックし、正確な URL またはドメイン全体に対して [リクエストをブロック] または [リクエストをスロットリング] を選択します。この操作を行うと、[リクエスト条件] ドロワーが自動的に開き、エントリの新しいルールが作成され、選択したネットワーク制約がすぐに適用されます。

リクエスト条件ドロワー

新しい [リクエスト条件] ドロワーでは、影響を受けるリクエストと、リクエストをどの程度遅延させるかを制御できます。

スロットリング設定は、標準のプリセット（3G 低速など）または独自のカスタム プロファイルを選択してカスタマイズできます。ワイルドカード（*）を使用して URL パターンを編集し、これらの条件を特定の動的リソースまたはリクエストのグループに適用することもできます。

リクエストが複数のパターンと一致する場合、DevTools は最初に見つかったルールを適用します。この優先順位は、引き出しの矢印ボタンを使用して優先度の高いルールをリストの上部に移動することで制御できます。

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

自然に遅いリクエストと、DevTools によって人工的にスロットリングされているリクエストを区別することが重要です。ページを再読み込みすると、新しいスロットリング ルールが適用されます。影響を受けるリクエストは、[ネットワーク] パネルで簡単に確認できます。

• ブロックされたリクエストは赤で表示され、ステータス列のステータスは (blocked:devtools) になります。
• スロットリングされたリクエストは黄色または金色で表示され、[時間] 列に時計アイコンが表示されます。アイコンにカーソルを合わせると、適用されているネットワーク条件を確認できます。これは [タイミング] サブパネルにも表示されます。

リクエストをスロットリングすると、ページのパフォーマンスに影響する可能性があります。パフォーマンス プロファイルを記録するときに、[ネットワーク] トラックのリクエストにカーソルを合わせると、適用されたネットワーク条件の詳細を示すツールチップが表示されます。