DevTools のヒント: ネットワーク レスポンスをオーバーライドしてモックする

Sofia Emelianova

Chrome DevTools を使用すると、レスポンス ヘッダー、ファイル、API リクエストなどをローカルでオーバーライドしてモックできます。バックエンド、サードパーティ、API の追いつきを待たずに、変更と修正のプロトタイプを作成してテストすることで、ワークフローのブロックを解除します。

ローカル オーバーライドを使用して、以下の方法で設定を変更する方法について、動画でご確認ください。

• XHR またはフェッチ リクエストの応答をモックして、本番環境の修正を実際に本番環境に移行する前にテストします。
• 新しい UI デザインのプロトタイプを作成します。
• オーバーライドされたファイルをフォルダに保存して、お気に入りのコードエディタで編集し、同僚と共有できます。

• パフォーマンスの修正をテストして、効果が大きいことを事前に確認します。

  ヒント: [要素] パネルではオーバーライドを使用できません。[検索] パネルを使用して、[ソース] で適切なファイルを見つけてください。

• レスポンス ヘッダーをオーバーライドする。

• ワイルドカード文字を使用して複数の URL のヘッダーをオーバーライドする。

• [ネットワーク] パネルでオーバーライドされたリクエストをフィルタする。

  注: ローカル オーバーライドにより、キャッシュが自動的に無効になります。