ブラウザを「最強のローカルサーバー」に変える。DevToolsの「Overrides」という魔法
フロントエンドエンジニアが最も時間を浪費するのは、バックエンドの実装待ちや、些細なUIの調整でいちいちビルドを走らせる瞬間です。「APIのレスポンスがこうだったらUIはどう動く？」「本番環境のこのCSSを、ちょっとだけ変えて確認したい」——。
そんな時、多くの人はローカルに環境を構築し直したり、プロキシサーバーを立てたりして消耗します。しかし、ブラウザのDevToolsに隠された「Overrides（ローカルオーバーライド）」機能を使えば、そんな苦労は過去のものになります。
これは単なるデバッグ機能ではありません。ブラウザとローカルファイルを直結させ、サーバーを介さずにフロントエンドを完結させる「開発の最終兵器」です。
—
1. なぜ「Overrides」が開発効率を極限まで引き上げるのか
通常、ブラウザはサーバーから受け取ったファイルを「絶対的な正義」として読み込みます。しかし、Overridesを有効にすると、ブラウザはネットワークへリクエストを投げる前に、「ローカルの特定フォルダに同じ名前のファイルがないか？」を先に確認し、あればそれを優先的に読み込みます。
これにより、以下のメリットが生まれます。
- 爆速プロトタイプ: バックエンドが未完成でも、JSONをローカルに置いておけば、API通信を完全にエミュレートできます。
- 本番環境のデバッグ: 本番環境のJS/CSSをローカルファイルに差し替えて、「なぜ本番でだけ動かないのか？」をその場で特定できます。
- ビルド不要の即時反映: 修正したコードを保存するだけで、ブラウザが即座にそれを反映します。
—
2. 実践：Overridesを爆速でセットアップする
では、実際に設定してみましょう。まずは「準備」が重要です。
ステップ1：作業用ローカルフォルダの作成
デスクトップなどどこでも構いません。空のフォルダを作成してください（例：`~/dev-overrides`）。
ステップ2：DevToolsへの権限付与
1. Chromeでデバッグ対象のページを開き、`F12`でDevToolsを開きます。
2. Sourcesタブを選択し、左側のサブタブにある「Overrides」をクリックします。
3. 「+ Select folder for overrides」をクリックし、先ほど作成したフォルダを選択します。
4. ブラウザ上部に「DevToolsにこのフォルダへのアクセスを許可しますか？」と出るので、「許可」を押してください。
これで、ブラウザとローカルフォルダが「握手」を交わしました。
—
3. HelloWorld：実際にUIを書き換えてみる
では、この機能がどれほど強力か、体験してみましょう。
手順：特定のJSファイルを差し替える
1. Sourcesタブの「Page」サブタブから、書き換えたいスクリプトファイルを探します。
2. そのファイルを右クリックし、「Save for overrides」を選択します。
3. これで、そのファイルがあなたのローカルフォルダ内に自動的にコピーされます。
4. 試しに `console.log(‘Hello World’);` を追加して保存（`Ctrl+S` / `Cmd+S`）してみてください。
重要: 保存した瞬間にブラウザをリロードしてください。ブラウザはサーバーへ通信する代わりに、あなたのローカルにある「書き換えられたファイル」を読み込みます。コンソールに `Hello World` が表示されれば成功です。
—
4. プロ級のテクニック：APIレスポンスのモック化
OverridesはJSやCSSだけでなく、「Fetch/XHRリクエストのレスポンスそのもの」を差し替えることができます。これが最も実務で役立つ場面です。
1. Networkタブを開き、差し替えたいAPIリクエストを探します。
2. 右クリックして 「Override content」 を選択します。
3. SourcesタブにそのJSONデータが展開されるので、好きな値に書き換えて保存します。
これで、バックエンドの実装を待つことなく、エラーハンドリングのテストや、極端なデータ量の表示テストが自由自在に行えます。
// ローカルに保存されたAPIモックの例 (user_data.json)
{
“id”: 123,
“name”: “テストユーザー”,
“status”: “premium”, // 本来は”free”だが、あえて書き換えてUIを確認する
“items”: []
}
—
最後に：この知見をどう活かすか
Overridesをマスターしたあなたは、もう「サーバーが動いていないから何もできない」という言い訳をする必要はありません。
- UI調整: デザインの微調整はOverridesで仮実装して、OKならコードベースに反映する。
- 本番バグ調査: 本番の圧縮されたコードを読み解く際、Overridesで適宜整形したコードを読み込ませる。
最初は少し面倒に感じるかもしれませんが、一度このフローに慣れると、「いちいちビルド待ちをする時間が、すべてあなたの思考のための時間」に変わります。
開発環境は、構築するものではなく「工夫してハックするもの」。この小さな設定一つで、あなたの開発ライフは劇的に楽になるはずです。さあ、今すぐあなたのブラウザで試してみてください。