chromeデベロッパーツールのLocal Overridesの使い方

Google ChromeのLocal Overrides(ローカルオーバーライド)機能について紹介します！

ローカルオーバーライドは効率よくファイル編集を行う機能

ローカルオーバーライドはデベロッパーツール上でのコード編集を、これまでよりかんたんに効率よく行える機能です。

例えばデベロッパーツール上でCSSのスタイル変更を試してみたいときにコードを編集することができます。

これまでのデベロッパーツールにもCSSを編集する機能はありました。

これまでの方法は、[Elements]タブを開いて以下部分からCSSを編集するというやり方でした。
これまでの編集方法

でもこの方法だと以下のような使いづらい部分がありました。

ローカルオーバーライドはこの問題点を解消してくれる機能です。

[box05 title=”これまでの問題点を解消”]

[/box05]

これまではデベロッパーツール上で要素を選択してからその要素に当たっているCSSを編集していました。
ローカルオーバーライドではCSSを丸ごとローカルにコピーして編集できるので、要素を選択する必要がありません。

これまでのCSS編集方法では、一度ページを再読み込みしてしまうと編集内容がリセットされてしいます。
ローカルオーバーライドは再読み込み後も編集内容を保持することができます。

ローカルオーバーライドはアップされているサイトのファイルをローカルファイルに置き換えます。
置き換えたファイルを編集してCSSをサイトに反映することができます。

例えば

公開している「A」というサイトがあったとします。

「A」サイトが読み込んでいるCSSファイルをローカルフォルダに複製して、

本来読み込んでいるCSSではなく複製したほうのファイルを読み込みます。

その複製を編集してブラウザ上での表示を変更することができます。

①右クリック　＞　[検証]　をクリックしてデベロッパーツールを開く

②[sources]タブを開く　＞　[overrides] ＞「+ Select folder for overrides」をクリック
ローカルファイルを置くフォルダを作成する
④ローカルファイルを格納するフォルダを選択する

⑤デベロッパーツールでは[パス]へのフルアクセスがリクエストされます。「許可」をクリック

①[Network]タブを開く

②編集したいファイルを右クリック

③「Save for overrides」をクリック
アップされているファイルをローカルに複製する

④[sources]タブを見ると複製したファイルが表示されている

①CSSで文字色を変更するコードを追加してみる
cssにコードを追加する

②文字が赤く変更されたのがわかる
文字が赤くなったのがわかる

③[ctrl] + Sで保存する
変更を保存することでリロードしても編集内容を保つことができます。

「Enable Local Overrides」のチェックボックスにチェックを入れると「有効」、チェックを外すと「無効」となります。

チェックを外してリロードすると編集内容が反映されずに元の状態で表示されます。

チェックを外すと無効になる

解除し忘れると表示が本来のwebサイトの表示では無いままになるので注意です。

自分だけ表示が違うとキャッシュかな？と勘違いするので、必要なくなったら解除を忘れずに行いましょう!