Webサイトで未使用の画像とCSSスタイルを見つけるにはどうすればよいですか？[閉まっている]

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

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

ありますFirefoxの拡張機能がありました 見つけるページ上に未使用のCSSセレクターが見つかりました。それ持っているサイト全体をクモにするオプションがありました。バージョン3.01すべき Firefoxの新しいバージョンで動作する可能性があります。

http://www.brothercake.com/dustmeselectors/

そしてここに別のオプションがあります：

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Webサービスに料金を支払ったり、アドオンを検索したりする必要はありません。これは、F12でGoogle Chromeにすでにあります。 (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を参照してください

ファイルレベル：

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

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

CSS冗長性チェッカーはローカルで実行するツールで、スタイルシートと、URLのリストまたはHTMLファイルのディレクトリのいずれかを渡します。ツールのサイトでの説明は次のとおりです。

CSSスタイルシートと、HTMLファイルのURLをリストする.txtファイル、またはHTMLファイルのディレクトリのいずれかが指定された単純なスクリプトは、それらすべてを反復処理し、HTMLで決して呼び出されないCSSステートメントをスタイルシートにリストします。

基本的に、CSSファイルを適切かつコンパクトに保つ​​のに役立ちます。そしてそれはかなり正確です。

A List Apartブログの投稿でTim Murtaughが述べたように、「CSSをクリーンに保つための2つのツール」：

csscss

csscssは、指定されたCSSファイルを解析し、どのルールセットに重複した宣言があるかを通知します。

そして質問に最も関連性があります：
ヘリウム-css

ヘリウムは、Webサイトの多くのページで未使用のCSSを検出するためのツールです。

ツールはJavaScriptベースで、ブラウザから実行されます。

Heliumは、サイトのさまざまなセクションのURLのリストを受け入れ、各ページを読み込んで解析して、すべてのスタイルシートのリストを作成します。次に、URLリストの各ページにアクセスし、スタイルシートにあるセレクターがページで使用されているかどうかを確認します。最後に、特定のページで使用されていないことが判明した各スタイルシートとセレクターの詳細を示すレポートを生成します。

私は、Adobe DreamweaverまたはAdobe Goliveのいずれかに、孤立したスタイルと画像の両方を見つける機能があることを思い出しているようです。今は覚えられません。おそらく両方ですが、機能は十分に隠されていました。

TopStyleには、孤立したクラスを見つけて処理するための一連のツールがあります。また、HTMLでIDとクラスが使用されている場所に関するレポートも表示されるため、関連するマークアップをすばやく開いてスキップすることができます。この機能に関するウェブサイトの宣伝文句は次のとおりです。

サイトレポート：サイトでスタイルが使用されている場所がひと目でわかります。どのスタイルシートでも定義されていないスタイルクラスをどこに適用したかを確認するか、使用していない定義済みのスタイルクラスを確認してください。

見慣れないWebサイトの分析に非常に役立ちます。

ただし、未使用の画像は検出されません。

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

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

Firefoxのすべてのバージョンで動作するこのツールを見つけました！それがどのように機能するかを学ぶのに少し時間がかかりますが、それが始まるとそれはかなり良いようです。これは、CSSセレクターをコメントアウトした新しいバージョンのCSSを保存するため、必要に応じてすばやく元に戻すことができます。

CSSの使用-Firefoxアドオン

この小さなツールは、いくつかのhtmlで使用されているcssルールのリストを提供します。

ここにコードペンがあります

をクリックしRun code snippet、次にをクリックしFull pageてアクセスします。次に、スニペットの指示に従います。全ページを実行して、html / cssで動作することを確認できます。

しかし、コードペンをツールとしてブックマークするだけの方が簡単です。

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("</code>");

ここにリストされているすべてのツールは、CSSに最適です。Dreamweaver＆Coについては知りませんが、しばらく前に小さなプログラムを作成して、Webサイトプロジェクトのクリーンアップを支援しました

未使用のファイルを検索

CSSやその他のものではなく、孤立した画像やその他の種類のファイルには役立ちます。

それが役に立てば幸い！

ヘリウムCSSは、このための優れたツールです。ただし、このツールはWebサイトの開発バージョンまたはローカルバージョンで実行する必要があります。これを製品版で実行すると、訪問者はヘリウムのテスト環境を見ることができます。

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

未使用の画像ファイルを見つけるためのツールに関する質問に答えるために、Xenu Link Sleuthを使用してサイトをスパイダーし、サイトが使用するすべての画像を見つけることができます。次に、Xenuは、孤立したファイルを見つけるためにディレクトリをクロールできるように、ftpアクセスを要求します。私はまだ本番サーバーで使用していませんが、調べる価値はあります。

編集：JavaScriptで使用されている画像を削除しないように注意する必要があります。