サマリ
本記事では、Chrome DevTools の Overrides（ローカルオーバーライド）機能を使って、本番サイトが読み込むJavaScriptファイルを手元のローカルファイルに一時的に差し替え、ページ再読み込み後も編集内容を維持したまま動作確認する手順を説明します。DevTools上の一時編集では検証しづらい「ページロード時に実行される処理」の確認に有効です。
本文
背景：なぜローカルに差し替えたいのか
Webシステムが出力するHTMLの多くは、JavaScriptファイルと連携してさまざまな機能を実現しています。
JavaScriptの挙動を変えたい場合、通常はJavaScriptファイルを修正してサーバへアップロード（デプロイ）し、動作確認します。
一方で、次のような理由で「今すぐ本番相当のページで、手元の修正を当てて挙動だけ確認したい」ことがあります。
- デプロイの手間が大きい／関係者調整が必要
- 本番と同等のデータ・状態でのみ再現する不具合がある
- 修正が複数ファイルに及び、DevTools上での一時編集が煩雑
しかし DevTools で JavaScript を直接編集しても、ページを再読み込みするとサーバ上のファイルを再取得して編集が消えるため、ページロード時に実行される処理の検証には向きません。
そこで使えるのが Overrides です。Overridesを使うと、特定URLで取得したリソース（例: sample.js）をローカルに保存し、以後はページ再読み込み時にもローカル保存版を優先して読み込ませることができます。
確認用の環境（サンプル）
手順確認用の簡単なコードを用意しました。下記リポジトリをクローンして boot.sh を実行し、Chromeで https://localhost:8000/ を開くと、以降の手順を再現できる環境になります。
- リポジトリ: ym2024x/chrome_how_to_override
- 起動:
boot.shを実行 - アクセス:
https://localhost:8000/
手順
1. 読み込まれているJavaScriptの確認
index.html では sample.js を読み込んでいます。
Chromeで F12 を押してDevToolsを開き、sample.js の内容を確認します。
2. DevTools上で一時的にコードを修正してみる（すぐ元に戻る例）
sample.js の messageElement.textContent に設定している文字列を変更してみます。
この状態でページを再読み込みすると、sample.js がサーバから再取得され、編集内容が元に戻るはずです。
ここからが Overrides の出番です。
3. Overrides を設定して、ローカルファイルに差し替える
DevTools の「ソース」→（上部のタブ列）「オーバーライド」を開きます。
Overrides を有効化したら、再度 sample.js を編集して Ctrl + S で保存します。
すると、次のようにローカルへの保存先パスが表示され、sample.js がローカルに保存されます。
後で不要になったら削除できるよう、ファイルマネージャ等でも sample.js が作成されていることを確認しておくと安心です。
この状態でページを再読み込みすると、以後 sample.js はサーバ上のものではなく、ローカルに保存されたファイルが読み込まれるようになります（DevTools上で、ファイル名付近に目印が表示されます）。
4. 再読み込みして、差し替えが効いていることを確認
再度ページを読み込み直します。
今度は sample.js で messageElement.textContent に設定した値がページに表示されます。
5. Overrides（差し替え）の解除
次のいずれかで解除できます。
- ローカルに保存されたオーバーライド用ファイルを削除する
- 「ローカルのオーバーライドを有効化」のチェックを外す
結論
Chrome DevTools の Overrides を使うと、ページ再読み込みで消えてしまうJavaScriptの編集を、ローカルファイルとして維持しつつ本番相当ページで検証できます。デプロイせずに挙動確認できるため、調査・切り分け・一時回避策の検証で特に有効です。
ただし、Overrides はあくまで 自分のブラウザ上の差し替えであり、チーム共有や恒久対応には向きません。検証が終わったら、差し替えを解除し、必要であれば正式な修正としてソース管理・レビュー・デプロイの流れに戻すのが安全です。
参考
- Google Chrome Developers: Override web content and HTTP response headers locally Chrome Developers