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

メールアドレスが公開されることはありません。

関連記事

Google

Googleマップで調べた経路をホーム画面に追加する (Android)

Android版の Googleマップで調べた経路は、ホーム画面にアイコンとして追加することができます。 手順は以下となります。 Google マップで調べた経路をホーム画面に追加する手順 (1) G …

web development

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する

Webページが読み込む CSS, JS コードから、実際に使われている部分のみを抽出する方法を紹介します。

Glitch

Glitch で PHP を使う方法

Glitch は正式にPHPをサポートしていませんが、ほんの少しの設定変更により、PHPが使えるようになります。

ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。 今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのも …

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。