Come posso trovare immagini e stili CSS inutilizzati in un sito web? [chiuso]

Esiste un metodo (diverso da tentativi ed errori) che posso utilizzare per trovare file di immagine inutilizzati? Che ne dici delle dichiarazioni CSS per ID e classi che non esistono nemmeno nel sito?

Sembra che ci possa essere un modo per scrivere uno script che scansiona il sito, lo profila e vede quali immagini e stili non vengono mai caricati.

C'èC'era un'estensione per Firefox che repertitrovato selettori CSS inutilizzati su una pagina. essohaaveva un'opzione per ragno l'intero sito. Versione 3.01dovrebbero potrebbe funzionare con le versioni più recenti di Firefox.

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

Ed ecco un'altra opzione:

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

Non devi pagare alcun servizio web o cercare un componente aggiuntivo, lo hai già in Google Chrome sotto F12 (Inspector)->Audits->Remove unused CSS rules

Immagine dello schermo:

Aggiornamento: 30 giugno 2017

Ora Chrome 59 fornisce la copertura del codice CSS e JS . Vedi https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

A livello di file:

usa wget per eseguire lo spider in modo aggressivo del sito e quindi elabora i log del server http per ottenere l'elenco dei file a cui si accede, diffondilo con i file nel sito

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

CSS Redundancy Checker è uno strumento che esegui localmente, a cui passi un foglio di stile e un elenco di URL o una directory di file HTML. Ecco la descrizione fornita sul sito dello strumento:

Un semplice script che, dato un foglio di stile CSS e un file .txt che elenca gli URL di file HTML, o una directory di file HTML, itererà su tutti ed elencherà le istruzioni CSS nel foglio di stile che non vengono mai chiamate nell'HTML.

Fondamentalmente, ti aiuta a mantenere i tuoi file CSS pertinenti e compatti. Ed è ragionevolmente accurato.

Come notato da Tim Murtaugh nel post del blog A List Apart, " Two Tools to Keep Your CSS Clean ":

csscss

csscss analizzerà qualsiasi file CSS che gli fornisci e ti farà sapere quali set di regole hanno dichiarazioni duplicate.

E più rilevante per la domanda:
elio-css

Helium è uno strumento per scoprire CSS inutilizzati su molte pagine di un sito web.

Lo strumento è basato su javascript e viene eseguito dal browser.

Helium accetta un elenco di URL per diverse sezioni di un sito, quindi carica e analizza ogni pagina per creare un elenco di tutti i fogli di stile. Quindi visita ogni pagina nell'elenco degli URL e controlla se i selettori trovati nei fogli di stile vengono utilizzati nelle pagine. Infine, genera un report che dettaglia ogni foglio di stile e i selettori che non sono stati trovati per essere utilizzati in nessuna delle pagine date.

Mi sembra di ricordare che Adobe Dreamweaver o Adobe Golive hanno una funzione per trovare stili e immagini orfani; non ricordo quale ora. Forse entrambi, ma le caratteristiche erano ben nascoste.

TopStyle dispone di una suite di strumenti per individuare e gestire le classi orfane. Fornirà anche rapporti su dove vengono utilizzati gli ID e le classi nell'HTML, consentendoti di aprire rapidamente e saltare al markup pertinente. Ecco il blurb dal sito web riguardo a questa funzione:

Rapporti sul sito: guarda a colpo d'occhio dove vengono utilizzati gli stili nel tuo sito. Scopri dove hai applicato le classi di stile che non sono definite in nessun foglio di stile o guarda quali classi di stile hai definito che non vengono utilizzate.

Molto utile per sezionare siti Web sconosciuti.

Tuttavia, non trova immagini inutilizzate.

Chrome canary build ha un'opzione nella barra degli strumenti per sviluppatori per " Copertura CSS" come una delle funzionalità sperimentali per sviluppatori. Questa opzione viene visualizzata nella scheda della sequenza temporale e può essere utilizzata per ottenere un elenco dei CSS inutilizzati.

Tieni presente che dovresti abilitare questa funzione anche nelle impostazioni nella barra degli strumenti per sviluppatori. Questa funzione dovrebbe probabilmente arrivare alla versione ufficiale di Chrome.

Ho trovato questo strumento che funziona con tutte le versioni di Firefox! Ci vuole un po 'per imparare come funziona, ma una volta avviato sembra abbastanza buono. Salverà una nuova versione del CSS con selettori CSS rimossi in modo da poter tornare rapidamente se necessario.

Utilizzo CSS - Firefox Addon

Questo piccolo strumento ti dà un elenco delle regole CSS utilizzate da alcuni html.

Eccolo su Code Pen

Fare clic su Run code snippet, quindi fare clic su Full pageper accedervi. Quindi segui le istruzioni nello snippet. Puoi eseguirlo a pagina intera per vederlo funzionare con il tuo html / css.

Ma è più semplice aggiungere ai segnalibri la penna del codice come strumento.

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

Tutti gli strumenti qui elencati sono ottimi per i CSS. Non so di Dreamweaver & Co. Ma tempo fa ho creato un piccolo programma per aiutarmi a ripulire i progetti del mio sito web

Trova-inutilizzato-Files

Non aiuta con CSS e altro, ma invece con immagini orfane e altri tipi di file.

Spero che sia d'aiuto!

Helium CSS è un ottimo strumento per questo. Va notato però che dovresti eseguire questo strumento su una versione di sviluppo o locale del tuo sito web. Se lo esegui su una versione di produzione, i tuoi visitatori potranno vedere l'ambiente di test Helium.

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

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

Per rispondere alla tua domanda su uno strumento per trovare file di immagine inutilizzati, puoi utilizzare Xenu Link Sleuth per eseguire lo spider del tuo sito per trovare tutte le immagini utilizzate dal tuo sito. Quindi Xenu richiede l'accesso ftp in modo che possa eseguire la scansione delle directory per trovare file orfani. Non l'ho ancora usato su un server di produzione ma sembra degno di essere esaminato.

EDIT: Devi solo fare attenzione a non eliminare le immagini che vengono utilizzate da javascript.