members

members

Webページを高速デバッグ!
GoogleChromeローカルオーバーライド機能のススメ

Tweet

Chrome内臓のDeveloperToolは非常に高機能で、Web製作者にとっては欠かせないツールとなっています。
今回は、ローカルオーバーライド機能を活用してWebページを高速にデバッグする方法についてご紹介します。

ローカルオーバーライドとは

Webページが参照しているファイルの一部をローカルのファイルに差し替え、ローカルのファイルを読み込んだ状態のWebページをブラウザ上に表示することのできる機能です。

本番環境と同じローカル環境を用意しなくても、限りなく本番環境に近い状態でCSSなどの調整・動作検証ができるため、開発中はもちろん、公開済みWebページの調整でも効果を発揮します。

準備

ローカルオーバーライドはChromeのDeveloperTool標準機能です。1分ほどですぐに利用することが出来ます。

1.「Ctrl + Shift + I」でDeveloperToolを起動します。

2.Sourcesパネル内のOverridesタブを選択します。
「Select folder for overrides」をクリックするとフォルダ選択画面が開きます。

3.任意の場所にフォルダを作成します。

アドレスバーの下に、フォルダに対してChromeのアクセスを許可するか確認するメッセージが表示されるので、「許可」をクリックしてください。

以上の3ステップで準備完了です。

使い方

CSS編集を例に使い方をご紹介します。

1.NetworkパネルやSourcesパネルから任意のファイルを右クリックし、「Save for overrides」を選択してください。

ローカルにファイルが保存され、以後DeveloperTool上で修正した内容はローカルのファイルにも反映されます。
Elementパネルで編集したCSSなども自動的にローカルに保存されます。

2.DeveloperTool上で修正したいCSSに変更を加え、「Ctrl + S」で保存してください。
自動的のローカルのファイルも更新され、ブラウザ上の見た目も変更後の内容に変わります。
また、ローカルのファイルを直接編集しても、即座にブラウザの表示へ反映されます。
Browsersyncなどと違ってブラウザのリロードを伴わないので、リロード不要なときにはより高速に修正結果の確認が行えます。

よくある注意事項

オーバーライドを有効化した状態ではローカルのファイルが優先的に参照されるため、実際のサーバー上にアップされているファイルとは表示結果が変わってしまいます。
開発環境に修正したファイルをアップしたのに見た目が変わらない! といったことが起こりうるのでご注意ください。

ローカルオーバーライドは不要な場合は解除することも可能です。
Overridesタブの「Enable Local Overrides」のチェックを外して一時的にオフにするか、その隣りにあるアイコンをクリックすることでローカルのファイルとの連携を解除することが出来ます。
また、DeveloperToolを閉じている状態の時はローカルオーバーライドの変更内容が反映されません。

主な特徴と活用例

リロードやブラウザ終了後も変更内容が維持される。

JSの動作検証などでリロードが必要な場合にも活用できます。また、CDN配信のJSライブラリなどにも変更を加えることができるため、JS競合の調整にも役立つでしょう。

修正後のファイルがローカルに保存される。

ElementsパネルでCSSをデバッグしたときにありがちな、「CSS書き写し漏れによる崩れ」をなくすことが可能です。
DeveloperToolでの調整完了後はローカルに保存されたファイルを開発環境などにアップするだけでよいため、非常に高速な開発が可能となります。

本番環境のページに対して修正結果のプレビューができる。

本番環境のみで発生するJSエラーの回避策を試したり、表示速度高速化対策を本番環境で実行した際の効果をプレビューするといった開発が、本番環境のファイルに手を加えずに可能となります。
また、外出先など開発環境が整っていない状態でも限りなく本番環境に近い状態で開発が行えるため、テレワークやリモートワークにも活用できるかもしれません。

今回はCSSを中心に使い方をご紹介しましたが、HTMLやJS、画像などのファイルもローカルオーバーライドが利用できます。

Chromeさえインストールされていれば簡単な設定ですぐ使い始められますので、みなさんもぜひ活用してみてください。

コラム執筆者

岩本 岬(いわもと みさき)

Webサイト運用・構築のフロントエンドエンジニアリング、ディレクションなどを担当。