4.4 Local Overrides（永続化）

Local Overridesとは

DevToolsでCSS、JavaScript、HTMLを変更しても、通常はページリロードで元に戻る。Local Overridesを有効にすると、変更が指定したローカルフォルダに保存され、リロード後もその変更が維持される。

セットアップ手順

CSSのオーバーライド

最も一般的な使用例。本番サイトのスタイルを実験的に変更し、リロード後も維持できる。

方法1: Elementsパネルから

方法2: Sourcesパネルから

方法3: Networkパネルから

JavaScriptのオーバーライド

本番サイトのJavaScriptを修正し、バグの原因調査や修正テストに活用できる。

サードパーティスクリプトのデバッグ

広告スクリプト、アナリティクス、チャートライブラリなど、外部から読み込むスクリプトも同様にオーバーライドできる。問題の切り分けやパフォーマンス実験に有用。

// 例: サードパーティライブラリにログを追加
console.log('Library loaded:', new Date().toISOString());

// 元のコード
(function() {
    // ...
})();

APIレスポンスのオーバーライド

XHRやfetchリクエストのレスポンスをオーバーライドできる。バックエンドの変更を待たずにフロントエンドの開発・テストが可能。

// 例: APIレスポンスをモック
{
  "users": [
    {"id": 1, "name": "テストユーザー1"},
    {"id": 2, "name": "テストユーザー2"},
    {"id": 3, "name": "追加したモックデータ"}
  ],
  "total": 3
}

HTTPヘッダーのオーバーライド

レスポンスヘッダーをオーバーライドして、CORS、CSP、キャッシュ設定などを実験できる。

よくある活用例

Overridesフォルダの構造

オーバーライドしたファイルは、URLに基づいた階層構造で保存される。

devtools-overrides/
├── example.com/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── api/
│       └── users.json
└── cdn.example.com/
    └── lib/
        └── library.min.js

この構造により、複数サイトのオーバーライドを同一フォルダで管理できる。サイトごとにフォルダが分けられるため、整理しやすい。

Overridesの管理

有効/無効の切り替え

Sourcesパネル → Overridesタブ → Enable Local Overridesチェックボックスで切り替え。

個別ファイルの削除

すべてのOverridesを削除

OverridesタブのClearボタン（🚫アイコン）をクリック。

Overridesの一覧表示

Networkパネルでリクエストを右クリック → Show all overridesで、現在有効なすべてのオーバーライドを確認できる。

Changesタブで差分を確認

オーバーライドで変更した内容はChangesタブで差分として確認できる。

Changesタブには、変更したすべてのファイルが一覧表示され、各ファイルの差分がGit風のdiff形式で表示される。変更内容を確認してから本番コードに反映する際に便利。

制限事項

• ElementsパネルでのDOM変更は保存されない：HTMLの変更はSourcesパネルで行う必要がある
• HTMLファイル内のCSSは保存されない：外部CSSファイルのみオーバーライド可能。インラインスタイルやstyleタグ内のCSSは対象外
• キャッシュは自動無効化：Overrides有効時はブラウザキャッシュが無効になる
• Source Mapファイルは対象外：元のソースではなくビルド後のファイルをオーバーライドする

実践的なユースケース

1. 本番環境のバグ調査

本番サイトでのみ発生するバグを調査する際、コードにログを追加したり、条件を変更して原因を特定できる。

2. デザイン変更の提案

クライアントへの提案前に、実際のサイトでCSSを変更してスクリーンショットを撮影。説得力のあるプレゼンテーションが可能。

3. パフォーマンス実験

サードパーティスクリプトを削除または軽量版に置き換え、パフォーマンスへの影響を測定。

4. フロントエンド単独開発

バックエンドAPIの開発が完了する前に、モックレスポンスを使ってフロントエンドを開発・テスト。

5. A/Bテストのシミュレーション

本番サイトのUIを変更し、ユーザビリティテストを実施。実装前に効果を検証できる。