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

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

関連記事

Xserver

エックスサーバーのサイト転送設定が強化されました

エックスサーバーのサイト転送設定が強化されました。

Web

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする

Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする方法を紹介します。

Web

はてなブックマークにサイトのコメントを表示させない方法

はてなブックマークにサイトのコメントを表示させない方法を紹介します。

Web

Notification API のポイント解説

目次1. はじめにNotification API が行うこと補足2. Notification API の使い方(1) デスクトップ通知が許可されているかどうかを取得する。(2) ユーザーにデスクト …

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。