ハマログ

株式会社イーツー・インフォの社員ブログ

Chrome DevToolsのOverrides機能でローカルの画像に差し替え

公開しているページの修正や更新を行う時、
ローカル環境を作らずChromeのDevToolsでCSSを調整して、確認できたら該当のCSSファイルを編集する作業をしていますが、困ることがあります。

  • 再読み込みを誤って押すと調整箇所が消えてしまう。
  • DevToolsで調整したら同じ記述をCSSファイルに書くの二度手間。そもそも抜け漏れしやすい。
  • ローカル画像の差し替えを確認できない←今回一番の困りこと

こういう時にDevToolsのOverrides機能を使うと便利です。
CSSだと編集してすぐ確認できるので効率もアップです!

1.ローカル画像があるフォルダーを選択

Webデザイン制作の画像を差し替えたいとして、まずDevToolsを開いて、
1 Sourceタブをクリックして
2 Overridesタブをクリックして
3 用意した画像のあるフォルダーを選択する。
(フォルダーへのアクセスがリクエストされたら許可を押す。)

そしたらフォルダーが追加されます。画像も確認できます。
(今回もいらすとやさんのイラストをお借りしました 笑)
この時にEnable Local Overridesはチェックしてるのを確認します。
チェックしてないとこの機能は有効化されないです。
オン/オフの切り替えもできて便利です。

2.対象画像をローカルに保存

1 Networkタブをクリックして
2 今回は画像差し替えなのでimgを選択します
3 対象画像の上に右クリック
4 Save for overridesを選択する。

そしたら先ほど選択したローカルのフォルダーに追加されます。Overridesタブにも確認できます。

3.ローカルでファイルを置き換え

用意した画像を差し替えたい画像のところに持ってきて置き換える。

4.ローカルの画像が反映された!

反映されました!
(もし変わってないなら再読み込みしてみてください)

ChromeDevelopmentDevToolDevToolsGoogletool

yiting   yiting   2020年1月9日


関連記事

HTTPSページの優先インデックス登録(Google)

HTTPSページがHTTPページよりも優先してGoogleにインデックス登録され…

Google AnalyticsでGoogle Apps for Business行動履歴のトラッキング

こんにちは、かねこです。 はじめに イーツー・インフォでは、Google App…

SP横向き

最近少しデザインのちょっとした修正をすることがあって、 chromeにこんな機能…


← 前の投稿

次の投稿 →