Bagaimana cara menemukan gambar dan gaya CSS yang tidak digunakan di situs web? [Tutup]

Apakah ada metode (selain trial and error) yang dapat saya gunakan untuk menemukan file gambar yang tidak digunakan? Bagaimana dengan deklarasi CSS untuk ID dan Kelas yang bahkan tidak ada di situs?

Tampaknya ada cara untuk menulis skrip yang memindai situs, membuat profil, dan melihat gambar dan gaya mana yang tidak pernah dimuat.

AdaAda ekstensi Firefox itu menemukanmenemukan pemilih CSS yang tidak digunakan di halaman. Itumemilikimemiliki opsi untuk menjelajah seluruh situs. Versi 3.01.0Sebaiknya dapat bekerja dengan versi Firefox yang lebih baru.

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

Dan inilah opsi lainnya:

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

Anda tidak perlu membayar layanan web apa pun atau mencari addon, Anda sudah memiliki ini di Google Chrome di bawah F12 (Inspector)->Audits->Remove unused CSS rules

Tangkapan layar:

Update: 30 Jun, 2017

Sekarang Chrome 59 menyediakan cakupan kode CSS dan JS . Lihat https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Di tingkat file:

gunakan wget untuk secara agresif menjelajah situs dan kemudian memproses log server http untuk mendapatkan daftar file yang diakses, bedakan ini dengan file di situs

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

CSS Redundancy Checker adalah alat yang Anda jalankan secara lokal, yang Anda berikan lembar gaya dan daftar URL atau direktori file HTML. Berikut deskripsi yang diberikan di situs alat:

Skrip sederhana yang, diberi lembar gaya CSS dan file .txt yang mencantumkan URL file HTML, atau direktori file HTML, akan mengulang semuanya dan mencantumkan pernyataan CSS di lembar gaya yang tidak pernah dipanggil dalam HTML.

Pada dasarnya, ini membantu Anda menjaga file CSS Anda tetap relevan dan kompak. Dan itu cukup akurat.

Seperti dicatat oleh Tim Murtaugh di postingan blog A List Apart, " Dua Alat untuk Menjaga CSS Anda Tetap Bersih ":

csscss

csscss akan mengurai file CSS apa pun yang Anda berikan dan memberi tahu Anda kumpulan aturan mana yang memiliki deklarasi duplikat.

Dan yang paling relevan dengan pertanyaan:
helium-css

Helium adalah alat untuk menemukan CSS yang tidak digunakan di banyak halaman di situs web.

Alat ini berbasis javascript dan dijalankan dari browser.

Helium menerima daftar URL untuk berbagai bagian situs, lalu memuat dan mengurai setiap halaman untuk membuat daftar semua stylesheet. Kemudian ia mengunjungi setiap halaman dalam daftar URL dan memeriksa apakah pemilih yang ditemukan di stylesheet digunakan di halaman tersebut. Akhirnya, ini menghasilkan laporan yang merinci setiap lembar gaya dan pemilih yang tidak ditemukan untuk digunakan pada halaman tertentu.

Sepertinya saya ingat Adobe Dreamweaver atau Adobe Golive memiliki fitur untuk menemukan gaya dan gambar yatim piatu; tidak ingat yang mana sekarang. Mungkin keduanya, tapi fiturnya tersembunyi dengan baik.

TopStyle memiliki seperangkat alat untuk mencari dan menangani kelas yatim piatu. Ini juga akan memberi Anda laporan di mana ID dan kelas digunakan dalam HTML, memungkinkan Anda untuk dengan cepat membuka dan melompat ke markup yang relevan. Berikut uraian dari situs web mengenai fitur ini:

Laporan Situs: Lihat sekilas di mana gaya digunakan di situs Anda. Cari tahu di mana Anda telah menerapkan kelas gaya yang tidak ditentukan di setiap lembar gaya, atau lihat kelas gaya apa yang Anda tentukan yang tidak sedang digunakan.

Sangat berguna untuk membedah situs web yang tidak dikenal.

Itu tidak menemukan gambar yang tidak digunakan.

Chrome canary build memiliki opsi di bilah alat pengembang untuk " Cakupan CSS" sebagai salah satu fitur pengembang eksperimental. Opsi ini muncul di tab timeline dan dapat digunakan untuk mendapatkan daftar CSS yang tidak digunakan.

Harap dicatat bahwa Anda juga perlu mengaktifkan fitur ini dalam pengaturan di toolbar pengembang. Fitur ini mungkin akan mencapai rilis chrome resmi.

Saya menemukan alat ini bekerja dengan semua versi Firefox! Diperlukan sedikit waktu untuk mempelajari cara kerjanya, tetapi setelah dimulai tampaknya cukup bagus. Ini akan menyimpan versi baru CSS dengan pemilih CSS yang diberi tanda sehingga Anda dapat dengan cepat kembali jika perlu.

Penggunaan CSS - Addon Firefox

Alat kecil ini memberi Anda daftar aturan css yang digunakan oleh beberapa html.

Ini dia Code Pen

Klik Run code snippet, lalu klikFull page untuk masuk ke sana. Kemudian ikuti petunjuk di cuplikan tersebut. Anda dapat menjalankannya satu halaman penuh untuk melihatnya berfungsi dengan html / css Anda.

Tetapi lebih mudah hanya untuk menandai pena kode saya sebagai alat.

/* 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>");

Semua alat yang tercantum di sini bagus untuk CSS. Saya tidak tahu tentang Dreamweaver & Co. Tapi saya membuat program kecil beberapa waktu lalu untuk membantu saya membersihkan proyek situs web saya

Temukan-File yang Tidak Digunakan

Itu tidak membantu dengan CSS & barang, melainkan dengan gambar yatim piatu dan jenis file lainnya.

Semoga membantu!

Helium CSS adalah alat yang hebat untuk ini. Perlu dicatat bahwa Anda harus menjalankan alat ini pada pengembangan atau versi lokal situs web Anda. Jika Anda menjalankan ini pada versi produksi, pengunjung Anda akan dapat melihat lingkungan pengujian Helium.

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

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

Untuk menjawab pertanyaan Anda tentang alat untuk menemukan file gambar yang tidak digunakan, Anda dapat menggunakan Xenu Link Sleuth untuk menjelajah situs Anda guna menemukan semua gambar yang digunakan situs Anda. Kemudian Xenu meminta Anda untuk akses ftp sehingga dapat merayapi direktori Anda untuk menemukan file yatim piatu. Saya belum menggunakannya di server produksi tetapi kedengarannya layak untuk dilihat.

EDIT: Anda hanya perlu berhati-hati untuk tidak menghapus gambar yang digunakan oleh javascript.