Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ChromeのLocalOverridesを使ってみよう

More than 1 year has passed since last update.

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

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

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

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

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

komacchi
Warhammer 40kかWarhammer AoSを一緒にやりませんか? 出戻り底辺モデラー。ミロク持ちでスキートと銃猟。 最近はミニチュア塗ったり、ながめたりしてニヤニヤしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away