Bir web sitesinde kullanılmayan resimleri ve CSS stillerini nasıl bulabilirim? [kapalı]

Kullanılmayan görüntü dosyalarını bulmak için kullanabileceğim bir yöntem (deneme yanılma dışında) var mı? Sitede bile bulunmayan ID'ler ve Sınıflar için CSS bildirimleri nasıl olur?

Görünüşe göre siteyi tarayan, profilini oluşturan ve hangi resimlerin ve stillerin asla yüklenmediğini gören bir komut dosyası yazmanın bir yolu olabilir.

OradaBir Firefox eklentisi vardı. buluntularbir sayfada kullanılmayan CSS seçicileri buldu. Ovardırtüm siteyi örtmek için bir seçenek vardı. Sürüm 3.01meli Firefox'un daha yeni sürümleriyle çalışabilir.

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

Ve işte başka bir seçenek:

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

Herhangi bir web hizmeti ödemeniz veya bir eklenti aramanız gerekmiyor, bunu zaten Google Chrome'da F12 altında kullanıyorsunuz (Inspector)->Audits->Remove unused CSS rules

Ekran görüntüsü:

Güncelleme: 30 Haz, 2017

Artık Chrome 59, CSS ve JS kodu kapsamı sağlıyor . Bkz. Https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Dosya düzeyinde:

Siteyi agresif bir şekilde örtmek için wget kullanın ve ardından erişilen dosyaların listesini almak için http sunucusu günlüklerini işleyin, bunu sitedeki dosyalarla farklılaştırın

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

CSS Artıklık Denetleyicisi , yerel olarak çalıştırdığınız ve bir stil sayfası ve bir URL listesi veya bir HTML dosyaları dizini ilettiğiniz bir araçtır. Aracın sitesinde verilen açıklama şu şekildedir:

Bir CSS stil sayfası ve HTML dosyalarının URL'lerini listeleyen bir .txt dosyası veya HTML dosyalarının bir dizini verildiğinde, hepsinin üzerinde yineleyen ve HTML'de asla çağrılmayan CSS ifadelerini stil sayfasında listeleyen basit bir komut dosyası.

Temel olarak, CSS dosyalarınızı alakalı ve kompakt tutmanıza yardımcı olur. Ve oldukça doğru.

Tim Murtaugh tarafından A List Apart blog gönderisinde belirtildiği gibi, " CSS'nizi Temiz Tutmak için İki Araç ":

csscss

csscss, ona verdiğiniz tüm CSS dosyalarını ayrıştırır ve hangi kural kümelerinin yinelenen bildirimleri olduğunu size bildirir.

Ve soruyla en alakalı:
helyum-css

Helyum, bir web sitesindeki birçok sayfada kullanılmayan CSS'yi keşfetmek için kullanılan bir araçtır.

Araç, javascript tabanlıdır ve tarayıcıdan çalışır.

Helium, bir sitenin farklı bölümleri için bir URL listesi kabul eder, ardından tüm stil sayfalarının bir listesini oluşturmak için her sayfayı yükler ve ayrıştırır. Daha sonra URL listesindeki her sayfayı ziyaret eder ve stil sayfalarında bulunan seçicilerin sayfalarda kullanılıp kullanılmadığını kontrol eder. Son olarak, her bir stil sayfasını ve verilen sayfaların hiçbirinde kullanılmadığı bulunan seçicileri ayrıntılandıran bir rapor oluşturur.

Adobe Dreamweaver veya Adobe Golive'nin hem sahipsiz stilleri hem de görüntüleri bulma özelliğine sahip olduğunu hatırlıyorum; şimdi hangisi olduğunu hatırlayamıyorum. Muhtemelen her ikisi de, ancak özellikler iyi gizlenmişti.

TopStyle , yetim sınıfları bulmak ve bunlarla ilgilenmek için bir takım araçlara sahiptir. Ayrıca, HTML'de kimliklerin ve sınıfların nerede kullanıldığına dair raporlar sunarak ilgili işaretlemeyi hızlı bir şekilde açmanıza ve atlamanıza olanak tanır. İşte bu özellikle ilgili web sitesindeki tanıtım yazısı:

Site Raporları: Sitenizde stillerin nerede kullanıldığını bir bakışta görün. Herhangi bir stil sayfasında tanımlanmamış stil sınıflarını nereye uyguladığınızı bulun veya kullanılmayan hangi stil sınıflarını tanımladığınıza bakın.

Tanımadığınız web sitelerini incelemek için çok kullanışlıdır.

Yine de kullanılmayan görüntüleri bulamıyor.

Chrome canary build, deneysel geliştirici özelliklerinden biri olarak geliştirici araç çubuğunda " CSS Kapsamı" seçeneğine sahiptir. Bu seçenekler zaman çizelgesi sekmesinde ortaya çıkar ve kullanılmayan CSS'nin bir listesini almak için kullanılabilir.

Lütfen bu özelliği geliştirici araç çubuğundaki ayarlarda da etkinleştirmeniz gerekeceğini unutmayın. Bu özellik muhtemelen onu resmi Chrome sürümüne getirmelidir.

Firefox'un tüm sürümleriyle çalışan bu aracı buldum! Nasıl çalıştığını öğrenmek biraz zaman alır, ancak başladıktan sonra oldukça iyi görünüyor. CSS seçicileriyle birlikte CSS'nin yeni bir sürümünü kaydeder, böylece gerekirse hızlı bir şekilde geri dönebilirsiniz.

CSS Kullanımı - Firefox Eklentisi

Bu küçük araç size bazı html'ler tarafından kullanılan css kurallarının bir listesini verir.

İşte Code Pen'de

Tıklayın Run code snippet, ardından Full pagegirmek için tıklayın . Ardından, ön bilgideki talimatları izleyin. Html / css ile çalıştığını görmek için tam sayfa çalıştırabilirsiniz.

Ancak kod kalemimi bir araç olarak işaretlemek daha kolay.

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

Burada listelenen tüm araçlar CSS için harikadır. Dreamweaver & Co. hakkında bilgim yok ama bir süre önce web sitesi projelerimi temizlememe yardımcı olmak için küçük bir program yaptım

Bul-Kullanılmayan-Files

CSS ve malzeme konusunda yardımcı olmuyor, bunun yerine öksüz görüntülere ve diğer dosya türlerine yardımcı oluyor.

Umarım yardımcı olur!

Helium CSS bunun için harika bir araçtır. Bu aracı web sitenizin bir geliştirme veya yerel sürümünde çalıştırmanız gerektiğine dikkat edilmelidir. Bunu bir üretim sürümünde çalıştırırsanız, ziyaretçileriniz Helyum test ortamını görebilir.

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

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

Kullanılmayan görüntü dosyalarını bulmaya yönelik bir araçla ilgili sorunuzu yanıtlamak için , sitenizin kullandığı tüm görselleri bulmak üzere sitenizi taramak için Xenu Link Sleuth'u kullanabilirsiniz . Daha sonra Xenu, artık dosyaları bulmak için dizinlerinizi taraması için sizden ftp erişimini ister. Henüz bir üretim sunucusunda kullanmadım ama incelemeye değer gibi görünüyor.

DÜZENLEME: Javascript tarafından kullanılan resimleri silmemek için dikkatli olmalısınız.