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

投稿日：2019年4月19日更新日：2021年2月2日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

📂-Web

執筆者：labo