Google Chromeのデベロッパーツールで、ブラウザ上で納品データを本番サイトに適用して修正がきちんと反映できているか確認できます。
「Overrides」（ファイル上書き）という機能を利用します。

手順

①任意の場所に「overrides」フォルダーを作ります。

②「overrides」の中にフォルダーを作って確認したいサイトのrootパスをフォルダー名に設定します。
例：　www.xxxxxx.co.jp

③そのフォルダーの中に納品データを入れます。サイトと同じファイル構成にします。
例：　overrides > www.xxxxxx.co.jp > css > style.css

④Google Chromeで
デベロッパーツール > Sources > Overrides > フォルダーを追加
を選択して「overrides」フォルダーを追加します。このステップは初回のみです。

⑤確認したいページを更新すれば確認できます。修正したファイルや追加したファイルを確認できるはずです。
うまく反映されない時はファイルが不足しているか納品データの構成に問題があることを意味します。

⑥確認が完了したら納品データを「overrides」フォルダーから削除してください。
ただし、「overrides」フォルダーと各サイトのrootパスフォルダーはそのまま残してもいいです。次回以降そのまま使えます。

注意点

・「cache busting」を使っているサイトがあります。URLに意味のないクエリを付与して、キャッシュコントロール行うことで、例えば「style.css?1649392654」のようなファイル名になっています。こういったサイトではこの方法は使えません。
・スマホ実機での確認はできません。
・404エラーの確認はできません。
例えば追加画像があるときLocal overridesを使うと表示上問題なく反映されてることを確認できますが、コンソールでは追加画像が404となります。
よって、追加画像については表示を目視で確認しなければなりません。
・追加したSVG画像はlocal overridesでは反映されないようです。

hagiwara

デザイナーです。絵も描きます。 blender初心者、勉強中。 インドア派。多趣味。