Web

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

投稿日:2019年4月19日 更新日:

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

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

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

2. 使い方

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

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

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

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

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

[+ Select folder overrides] をクリックしてフォルダーを選択します
[+ Select folder overrides] をクリックしてフォルダーを選択します

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

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

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

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

[Save for overrides] を選択します
[Save for overrides] を選択します

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

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

指定したファイルがローカルに追加されます
指定したファイルがローカルに追加されます

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

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

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

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

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

ファイルを編集すると即座に反映されます
ファイルを編集すると即座に反映されます

3. Overrides タブ内の機能

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

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

Overrides タブ
Overrides タブ

4. その他

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

参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

未ログイン状態で Facebook を開いた時に表示されるログインウィンドウを消す

目次1. Facebook の仕様変更?2. ブックマークレットの使い方3. 仕組み4. 注意点5. おわりに 1. Facebook の仕様変更? 未ログイン状態で Facebook のページを開く …

WordPress

【WordPress】JP Markdownプラグインが code タグの属性を削除する問題への対応方法

目次1. 現象2. 原因3. 対応方法 1. 現象 WordPress の JP Markdown プラグインを使っていると、以下のような (<pre> タグを伴わない単独の) <c …

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …

CSS

【CSS】kbd 要素には “white-space: nowrap” を指定しましょう

kbd 要素に何も指定しないと、以下のように途中で改行されてしまうことがあります。 before 通常の状態 これを避けるために、kbd 要素に対して “white-space: nowr …

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …