html - Web サイトで使用されていない画像や CSS スタイルを見つけるにはどうすればよいですか?

Question

未使用の画像ファイルを見つけるために使用できる (試行錯誤以外の) 方法はありますか? サイトにさえ存在しない ID とクラスの CSS 宣言はどうですか?

サイトをスキャンしてプロファイリングし、読み込まれない画像とスタイルを確認するスクリプトを作成する方法があるようです。

Answer 1

Web サービスに料金を支払ったり、アドオンを検索したりする必要はありません。これは Google Chrome の F12 の下に既に存在します。(Inspector)->Audits->Remove unused CSS rules

スクリーンショット:

更新: 2017 年 6 月 30 日

Chrome 59 では、CSS および JS コード カバレッジが提供されます。https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverageを参照してください

Answer 2

ファイルレベルで：

wgetを使用してサイトを積極的にスパイダーし、httpサーバーのログを処理してアクセスされたファイルのリストを取得します。これをサイト内のファイルと比較します。

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Answer 3

Adobe Dreamweaver か Adob​​e Golive のどちらかが孤立したスタイルと画像の両方を見つける機能を持っていたことを思い出すようです。どれが今思い出せない。おそらく両方ですが、機能は十分に隠されていました.

Answer 4

Chrome カナリア ビルドには、実験的な開発者向け機能の 1 つとして、開発者ツールバーに「 CSS カバレッジ」のオプションがあります。このオプションはタイムライン タブに表示され、未使用の CSS のリストを取得するために使用できます。

開発者ツールバーの設定でもこの機能を有効にする必要があることに注意してください。この機能は、おそらく公式の chrome リリースになるはずです。