ハマログ

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

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

  yt   2020年1月9日


関連記事

Adobe MAX 2019に行ってきた

12月3日にパシフィコ横浜にて開催されたAdobe MAX 2019に参加してき…

Photoshopの新しい機能「AIフィルター」がおもしろい!

今年の10月19日にPhotoshop 22.0がリリースされました。今回の最新…

6月配布開始!デジタル庁の誰でも利用できるアイコン・イラストで「やさしいデジタル化」

2023年6月にデジタル庁から誰でも利用できる、イラストレーション・アイコン素材…


← 前の投稿

次の投稿 →