LoginSignup
2
1

More than 5 years have passed since last update.

ChromeのLocalOverridesを使ってみよう

Last updated at Posted at 2018-08-29

【以下社内向けに書いたものを再編集です】

chrome65から実装されたLocalOverridesの機能で、ローカルで指定したディレクトリに保存したファイルを編集し、devtoolsを開いてさえいれば、ページリロードしても変更した表示ができるようになっているので便利です。

使用例

  • 本番サイトやテストサイトでの調査
  • 作業中ファイルが実際のサイトに反映されたときの確認など

使用方法

devtoolsを開き、Overrides タブを選択。

スクリーンショット 2018-07-18 15.13.16.png

Select folder for overrides を選択し、ローカルディレクトリを指定します。すると、

スクリーンショット 2018-07-18 15.13.03.png

アクセスの警告がでますが、許可しましょう。

スクリーンショット 2018-07-18 15.15.58.png

そして、Page タブで変更したいファイルを選択し、Save for overrides で保存します

image.png

すると、Overrides タブの中でファイルが保存されます。

image.png

Pages タブでも保存されたファイルにはマークが付きます。

image.png

これが差し替えできるファイルになるので、自由に編集し、リロードしてみましょう。

ちなみに...
使い方として、この状態で指定したローカルディレクトリに保存してあるファイルを、別のファイルで上書きすると実は変更できたりします。
つまりローカルファイルの差し替えてテストが簡単にできる、ということになります。

工夫次第で作業効率があがるかもしれませんね。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1