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

フォントサイズに関するCSSクラス名にはどんな名前があるのか調べてみました

目次はじめにCSS Fonts Module Level 3FontawesomeBootstrap (v4)まとめ参考 はじめに フォントサイズを表す CSSクラス名として、どんな名前を使うのがよい …

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web

CORPヘッダーを使って、自分のサイトの画像を他のサイトから直リンクさせない方法

自分のサイトの画像を他のサイトから直リンクさせない方法について説明します。

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに 1. 「名前を付けて画像を保存」ができない画像 ウェブページに載っている画像をダウンロードしたい場合、 …