Chrome のローカルオーバーライド機能を使ってWebサイトのファイルをローカルのファイルに置き換える

1. Chrome のローカルオーバーライド機能とは？

Chrome の ローカルオーバーライド (Local Overrides) 機能を使うと、Webサイトの一部のファイルをローカルのファイルに置き換えることができます。

これは、すでに公開しているWebサイトを修正する時にとても便利です。ローカルに同じWebサーバー環境を用意しなくても CSS ファイル（やその他のファイル）を調整することができるからです。

2. 使い方

1. この機能で使用するローカル側のフォルダーを指定します

(1) Chrome を起動した状態で、Ctrl + Shift + I キーを押し、開発者ツールを開きます。

(2) [Sources] タブ – [Overrides] を開き、[+ Select folder overrides] をクリックして、フォルダーを指定します。

このとき、ローカルフォルダにアクセスする許可をChrome に与えてよいか聞いてくるので、[許可] します。

ここで指定するフォルダーは、Chrome でアクセスするサイト全てに対して利用されます。

2. 置き換えるファイルを指定します

(1) 開発者ツールの [Network] パネルを開いた状態で、Webサイトにアクセスします。

ブラウザが取得したファイルが全て表示されます。

(2) 置き換えたいファイルを右クリックして、[Save for overrides] を選択します。

(3) 先程追加したローカルのフォルダ内に、指定したファイルが追加されます。

もちろん、ファイルエクスプローラーでこのフォルダ内を見てもファイルが追加されたことが確認できるはずです。

3. ファイルを編集します

あとはこのファイルを編集します。

編集した内容はすぐ画面に反映されます。

Ctrl + S キーを押して変更を保存すると、ローカルフォルダ内のファイルにも変更が反映されます。

逆にファイルエクスプローラーからこのファイルに編集を加えて保存すると、その時点で Chrome 側の画面に変更が反映されます。

3. Overrides タブ内の機能

Overrides タブ内の [Enable Local Overrides] のチェックを外すとこの機能がオフになります。

また、その右にあるアイコンをクリックすると、ローカルフォルダーの紐付けがクリアされます。

4. その他

• 開発者ツールを閉じると、ローカルオーバーライドによるローカルのファイルの反映は行われなくなります。
• 今回は CSSファイルを例にして使い方を説明しましたが、これ以外の種類のファイルもこの機能は使えます。

参考

• DevTools（Chrome 65）の新  |  Web  |  Google Developers