ハマログ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


yiting   yiting   2020年1月9日


関連記事

SP横向き

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

Google for Nonprofits発表

本日、Google for Nonprofitsプログラム(非営利団体向けプログ…

Web配色ツール4選

デザインを考えるとき、時々配色がマンネリになってしまうことありませんか?今回は使…


← 前の投稿

次の投稿 →