Come posso trovare le immagini inutilizzate e gli stili CSS in un sito web?[chiuso]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
C'è un qualche metodo (non di prova e di errore) che posso usare per trovare inutilizzati, file di immagine?Come circa le dichiarazioni CSS per ID e Classi che non esiste nemmeno nel sito?
Sembra che ci potrebbe essere un modo per scrivere uno script che esegue la scansione del sito, profilo e vedere le immagini e gli stili sono mai caricato.
Soluzione
C'è un estensione per Firefox che trova inutilizzati selettori CSS in una pagina.Ha un'opzione per spider l'intero sito.Versione 3.01 dovrebbe funzionare con le nuove versioni di Firefox.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
E qui è un'altra opzione.
Altri suggerimenti
Non devi pagare qualsiasi servizio web o cercare un addon, è già presente in Google Chrome sotto F12 (Inspector)->Audits->Remove unused CSS rules
Screenshot:
Aggiornamento:30 Giugno 2017
Ora Chrome 59 prevede che CSS e JS codice di copertura.Vedere https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
A livello di file:
utilizzare wget aggressivo ragno del sito e quindi del processo http log del server per ottenere l'elenco dei file richiamati, la diff con i file del sito
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
CSS Ridondanza Correttore è uno strumento che si esegue in locale, che si passa un foglio di stile e un elenco di Url o una directory del file HTML.Ecco la descrizione fornita sul tool del sito:
Un semplice script che, dato un foglio di stile CSS e un .file txt elenco di Url di file HTML, file o una directory del file HTML, ripeterà tutti e elencare le dichiarazioni CSS nel foglio di stile che sono mai chiamato in HTML.
In sostanza, aiuta a mantenere il vostro file CSS pertinenti e compatto.E è ragionevolmente accurata.
Provare WARI - Applicazione Web di Risorse di Ispezione.
Trova le immagini inutilizzate inutilizzati e duplicato CSS/JS.
Link: wari.konem.net
Come notato da Tim Murtaugh in Un Elenco a parte un post di un blog "Due Strumenti per Mantenere Il CSS Pulito":
csscss analizza qualsiasi file CSS è dare e farvi sapere che gli schemi di gioco hanno ripetuto dichiarazioni.
E la maggior parte per la questione:
elio-css
Elio è uno strumento per scoprire inutilizzati CSS in molte pagine sul web sito.
Lo strumento è basato su javascript e viene eseguito dal browser.
Elio accetta un elenco di Url per le diverse sezioni di un sito, quindi carichi e analizza ogni pagina per creare un elenco di tutti i fogli di stile.Si quindi visita di ogni pagina l'elenco di URL e controlla se i selettori trovato in fogli di stile utilizzati nelle pagine.Infine, genera un report che mostra i dettagli di ogni foglio di stile e i selettori che non erano trovato per essere utilizzato su qualsiasi dato pagine.
Mi sembra di ricordare di Adobe Dreamweaver o Adobe Golive avere una funzione per trovare entrambi orfani di stili e immagini;non ricordo a che ora.Forse entrambi, ma le caratteristiche erano ben nascosti.
TopStyle dispone di una suite di strumenti per l'individuazione e trattare con orfani classi.Essa vi darà anche report in cui gli Id e le classi sono utilizzati in HTML, che consente di aprire rapidamente e passare al pertinenti markup.Ecco il blurb il sito per quanto riguarda questa funzione:
Sito Riporta:Vedere a colpo d'occhio gli stili utilizzati nel sito.Scoprire in cui è stato applicato lo stile classi che non sono definiti in qualsiasi stile lenzuola, o vedere quali classi di stile hai definito che non vengono utilizzate.
Molto utile per dissezione siti web sconosciuti.
Non trova le immagini inutilizzate, però.
Chrome canary build è un'opzione nella barra degli strumenti di sviluppo per la "CSS Copertura" come uno dei sperimentale di sviluppo.Questa opzione compare nella scheda timeline e può essere utilizzato per ottenere un elenco dei inutilizzati CSS.
Si prega di notare che è necessario attivare questa funzione in impostazioni nella barra degli strumenti di sviluppo troppo.Questa caratteristica, probabilmente, dovrebbe rendere ufficiale di chrome versione.
Ho trovato questo strumento che funziona con tutte le versioni di Firefox!Ci vuole un po ' di tempo per imparare come funziona, ma una volta avviato mi sembra abbastanza buona.Ciò consentirà di risparmiare una nuova versione del CSS con l'esecuzione di selettori CSS in modo da poter rapidamente ripristinare, se necessario.
Questo piccolo strumento è fornito un elenco di regole css in uso da un po ' di html.
Qui Codice Penna
Fare clic su Eseguire snippet di codice, quindi , fare clic su A piena pagina per entrare in esso.Quindi seguire le istruzioni nel frammento.È possibile eseguire piena pagina per vedere lavorare con html / css.
Ma è più facile solo per bookmark il mio codice penna 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 elencati qui sono grandi per i CSS.Non so Dreamweaver & Co.Ma ho fatto un piccolo programma un po ' indietro per aiutarmi a pulire il mio sito web progetti
Non aiuta il fatto che con i CSS & roba, ma invece orfani di immagini e altri tipi di file.
Speranza che aiuta!
Elio CSS è un ottimo strumento per questo.Dovrebbe essere notato, tuttavia, che è necessario eseguire questo strumento di sviluppo locale o la versione del tuo sito web.Se si esegue in una versione di produzione, i visitatori saranno in grado di vedere l'Elio ambiente di test.
Per rispondere alla tua domanda su uno strumento per trovare inutilizzati, file di immagine, è possibile utilizzare Xenu Link Sleuth ragno tuo sito per trovare tutte le immagini che il tuo sito utilizza.Quindi Xenu richiesto per l'accesso ftp in modo che possa eseguire la scansione della directory per trovare i file orfani.Non ho ancora utilizzato su un server di produzione, ma sembra degno di guardare in.
EDIT:Basta essere attenti a non cancellare le immagini che sono utilizzati da javascript.
