コーディング

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

chromeのローカルオーバーライドの使い方を解説します!

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

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

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

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

これまでの編集機能の問題点

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

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

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

  • 複数の箇所を変更したいとき、いちいち各要素を選択してCSSを編集する必要があり手間がかかる。
  • 編集途中に間違えて再読み込みしてしまうと、変更したコードが元に戻ってしまう。

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

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

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

  • CSSのタグを選択する必要がない
  • リロードしても編集した箇所がリセットされない

[/box05]

CSSのタグを選択する必要がない

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

リロードしても編集した箇所がリセットされない

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

ローカルオーバーライドの仕組み

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

例えば

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

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

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

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

ローカルオーバーライドの使い方

ローカルファイルを置くフォルダを指定する

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

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

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

アップされているファイルをローカルに複製する

①[Network]タブを開く

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

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

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

ファイルを編集する

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

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

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

チェックボックスで有効 or 無効を切り替えられる

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

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

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

解除忘れに注意

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

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

スポンサーリンク

-コーディング
-

© 2020 まめしばweb Powered by AFFINGER5