実稼働環境での問題を診断する場合、多くのことが問題となります。バグのある API 呼び出し、パフォーマンスを低下させるサードパーティのスクリプト、またはデータ パイプラインでの意図しないミスにより、すぐに大きな問題が発生する可能性があります。ありがたいことに、Chrome DevTools を使用すると、変更を公開する前にローカルでソリューションをテストして検証できます。 DevTools の中で最も強力であるにもかかわらず十分に活用されていないツールの 1 つは、オーバーライド機能です。これにより、ネットワーク応答を直接変更できるため、運用環境を変更せずにさまざまなシナリオをシミュレートできます。

このガイドでは、DevTools をインストールする方法 (まだインストールしていない場合)、ネットワーク リクエストを段階的にオーバーライドする方法、およびこの貴重なツールを最大限に活用するためのヒントを示します。

ネットワークオーバーライドを使用する理由

バックエンド コードに手を加えたり、ユーザーに影響を与えたりすることなく、API の応答を微調整したり、失敗したネットワーク リクエストをシミュレートしたりできることを想像してみてください。まさにそれが、ネットワーク オーバーライドによって実現できることです。次のことをしようとしているかどうか:

• ネットワーク リクエストが遅い、または失敗した場合のさまざまなシナリオをテストします。
• バックエンドの準備が整う前に新機能を検証します。
• 静的リソース (CSS や JavaScript ファイルなど) を変更して、スタイルや動作の問題をデバッグします。

DevTools は、すべてブラウザ内で調整、実験、検証できる制御された環境を提供します。

Chrome DevTools のインストール

Web 開発者であれば、おそらくすでにマシンに Google Chrome がインストールされているでしょう。ただし、まだ設定していない場合は、Chrome の公式サイトからダウンロードしてください。 Chrome DevTools はブラウザに組み込まれているため、インストールしたらすぐに使用できます。

プロのヒント: Chrome には最新の機能が備わっている傾向がありますが、DevTools は Edge、Brave、Opera などの他の Chromium ベースのブラウザでも動作します。

DevTools ネットワーク オーバーライドの開始

DevTools やこの機能を初めて使用する場合は、次の簡単な手順に従ってください:

1. 開発ツールを開く

Web ページの任意の要素を右クリックし、検査を選択します。これにより、DevTools インターフェイスが表示されます。または、Ctrl Shift I (Windows/Linux) または Cmd Option I (Mac) を押して開くこともできます。

2. [ネットワーク]タブに移動します

DevTools が開いたら、ネットワーク タブをクリックします。ここでは、Web サイトが行うすべてのネットワーク リクエストのライブ フィードが表示されます。 API 呼び出しから画像の読み込みまで、すべてがこのタブに記録され追跡可能です。リストが膨大に見える場合は、フィルター (AJAX リクエストの XHR など) を使用して、最も関連性の高いリクエストにビューを絞り込むことができます。

3. 特定のリクエストを識別してオーバーライドする

リクエストのリストをスクロールして、変更したいリクエストを見つけます。たとえば、API が間違った結果を返したり、サードパーティのスクリプトが誤動作したりする場合、ここで介入できます。目的のリクエストを右クリックし、コンテンツの上書きを選択します。

この機能を初めて使用する場合は、オーバーライドを保存するローカル フォルダーを選択するように求められます。このフォルダーにはすべての変更が含まれるため、後で元のファイルに簡単に戻すことができます。

4. 応答を編集

ローカル フォルダーを選択すると、上書きする応答が ソース タブに自動的に開きます。ここで、必要に応じてコンテンツを変更できます。 JSON 応答の微調整、JavaScript 関数の調整、HTML ファイルの変更など、必要な変更を自由に行うことができます。

上級ヒント: 大きなファイル、特にサードパーティのライブラリを変更する場合は、重要な機能が含まれている可能性があるため注意してください。予期せぬ結果を避けるために、特定のセクションに注目してください。

5. 保存して更新

編集が完了したら、Ctrl S (Windows/Linux) または Cmd S (Mac) を押してファイルを保存します。次に、Web ページを更新します。変更はローカル環境に反映され、変更されたネットワーク リクエストをライブであるかのようにテストできるようになります。

専門的なヒント: これらの変更はローカル環境にのみ適用されることに注意してください。ブラウザを閉じるかオーバーライドをクリアすると、元のリクエストが再開されます。

パワーユーザー向けの高度なヒント

上記の手順はネットワーク応答のオーバーライドの基本を概説していますが、Chrome DevTools はデバッグを次のレベルに押し上げたいと考えているユーザーにさらに高い柔軟性を提供します。

ネットワーク状態のシミュレーション

Chrome DevTools を使用すると、さまざまなネットワーク状態をシミュレートすることもできます。たとえば、遅い 3G 接続やネットワークが一時的に利用できないときにアプリケーションがどのように動作するかをテストしたい場合は、ネットワーク タブでネットワーク速度を調整できます。 オンラインというラベルのドロップダウン メニューをクリックし、目的の速度プロファイルを選択するだけです。

これは、ユーザーの接続状態が悪い場合や帯域幅が制限されている場合に、アプリを適切に機能低下させる場合に特に役立ちます。

複数のファイルのローカルオーバーライド

複数のファイルを一度にオーバーライドする必要がありますか?オーバーライド フォルダーに複数のリクエストを追加すると、Web サイトのさまざまな側面を完全に制御できるようになります。たとえば、CSS、JavaScript、API レスポンス オーバーライドを組み合わせて、本番コードを 1 行も変更することなく、潜在的な現実世界のシナリオを反映するシミュレートされた環境を作成できます。

セッション間でのオーバーライドの永続化

同じプロジェクトで頻繁に作業する場合、Chrome DevTools を使用すると、ブラウザ セッション間でオーバーライドを保持できます。これにより、ブラウザを閉じた後でも、次回ブラウザを開いたときに変更内容が有効なままになり、時間と労力を節約できます。

これを有効にするには、DevTools の 設定 メニュー (歯車アイコン) に移動し、オーバーライド セクションに移動して、永続的なオーバーライドを有効にする.

結論

Chrome DevTools は、要素の検査や JavaScript エラーのデバッグのためだけではなく、ライブ環境でのトラブルシューティングや実験の能力を大幅に強化できる非常に強力なツールです。ネットワーク応答をオーバーライドして模擬する方法を学ぶことで、運用サイトに影響を与えることなく、さまざまなソリューションをテストし、さまざまなシナリオをシミュレートし、変更を検証することができます。

経験豊富な開発者であっても、初心者であっても、Chrome DevTools の オーバーライド機能 をマスターすると、デバッグ スキルがレベルアップし、公開前に行った変更にさらに自信が持てるようになります。したがって、ただデバッグするのではなく、より賢くデバッグしてください。