Hoe kan ek ongebruikte beelde en CSS-style op 'n webwerf vind?[gesluit]
https://stackoverflow.com/questions/33242
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianVra
Is daar metode (behalwe proef en fout) wat ek kan gebruik om ongebruikte beeldlêers te vind?Hoe gaan dit met CSS-verklarings vir ID's en Klasse wat nie eers op die webwerf bestaan nie?
Dit wil voorkom asof daar 'n manier is om 'n skrif te skryf wat die webwerf skandeer, dit profileer en kyk watter beelde en style nooit gelaai word nie.
Oplossing
Daar is 'n Firefox-uitbreiding wat ongebruikte CSS-keurders op 'n bladsy vind.Dit het 'n opsie om die hele webwerf te spin.Weergawe 3.01 behoort met nuwer weergawes van Firefox te werk.
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
En hier is nog 'n opsie.
Ander wenke
Jy hoef nie enige webdiens te betaal of vir 'n byvoeging te soek nie, jy het dit reeds in Google Chrome onder F12 (Inspector)->Audits->Remove unused CSS rules
Skermskoot:
Opdateer:30 Junie 2017
Nou bied Chrome 59 CSS en JS kode dekking.Sien https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Op 'n lêervlak:
gebruik wget om die werf aggressief te spin en verwerk dan die http-bedienerlogboeke om die lys van lêers waartoe toegang verkry is te kry, verskil dit met die lêers op die werf
diff \
<(sed some_rules httpd_log | sort -u) \
<(ls /var/www/whatever | sort -u) \
| grep something
CSS Redundancy Checker is 'n instrument wat jy plaaslik hardloop, wat jy 'n stylblad en óf 'n lys URL's óf 'n gids van HTML-lêers deurgee.Hier is die beskrywing wat op die instrument se webwerf gegee word:
'N Eenvoudige skrif wat, gegewe 'n CSS -stylblad en óf 'n .txt -lêer wat URL's van HTML -lêers bevat, of 'n gids van HTML -lêers, sal dit oor almal herhaal en die CSS -stellings in die stylblad noem wat nooit in die HTML genoem word nie.
Basies help dit jou om jou CSS-lêers relevant en kompak te hou.En dit is redelik akkuraat.
Probeer WARI - Web Application Resource Inspector.
Dit vind ongebruikte beelde, ongebruikte en duplikaat CSS/JS.
Skakel: wari.konem.net
Soos opgemerk deur Tim Murtaugh op die A List Apart-blogpos, "Twee gereedskap om jou CSS skoon te hou":
CSSCSS sal enige CSS -lêers wat u gee, ontleed en u laat weet watter reëls het gedupliseerde verklarings.
En mees relevant vir die vraag:
helium-css
Helium is 'n instrument om ongebruikte CSS oor baie bladsye op 'n webwerf te ontdek.
Die instrument is javascript-gebaseer en loop vanaf die blaaier.
Helium aanvaar 'n lys met URL's vir verskillende afdelings van 'n webwerf en laai elke bladsy en ontleed elke bladsy om 'n lys van alle stylblaaie op te stel.Dit besoek dan elke bladsy in die URL -lys en kontroleer of die keurders wat in die stylblaaie voorkom, op die bladsye gebruik word.Laastens genereer dit 'n verslag wat elke stylblad en die keurders wat nie op enige van die gegewe bladsye gebruik is, uiteensit nie.
Dit lyk asof ek onthou dat Adobe Dreamweaver of Adobe Golive 'n funksie het om beide weesstyle en beelde te vind;kan nou nie onthou watter nie.Moontlik albei, maar die kenmerke was goed versteek.
Topstyl het 'n reeks gereedskap om weeskindklasse op te spoor en te hanteer.Dit sal jou ook verslae gee oor waar ID's en klasse in die HTML gebruik word, sodat jy vinnig kan oopmaak en na die relevante opmaak kan oorslaan.Hier is die blurb van die webwerf oor hierdie kenmerk:
Werfverslae:Kyk in 'n oogopslag waar style op u webwerf gebruik word.Ontdek waar u stylklasse toegepas het wat nie in enige stylblaaie gedefinieër is nie, of kyk watter stylklasse u gedefinieer het, wat nie gebruik word nie.
Baie nuttig om onbekende webwerwe te dissekteer.
Dit vind egter nie ongebruikte beelde nie.
Chrome canary build het 'n opsie in die ontwikkelaarnutsbalk vir "CSS-dekking" as een van die eksperimentele ontwikkelaarkenmerke.Hierdie opsies verskyn in die tydlyn-oortjie en kan gebruik word om 'n lys van die ongebruikte CSS te kry.
Neem asseblief kennis dat jy ook hierdie kenmerk in die instellings in die ontwikkelaarnutsbalk moet aktiveer.Hierdie kenmerk behoort waarskynlik die amptelike Chrome-vrystelling te bereik.
Ek het hierdie hulpmiddel gevind wat met alle weergawes van Firefox werk!Dit neem 'n rukkie om te leer hoe dit werk, maar sodra dit begin lyk dit redelik goed.Dit sal 'n nuwe weergawe van die CSS stoor met opgemerkte CSS-kiesers sodat jy vinnig kan terugkeer as jy moet.
Hierdie klein hulpmiddel gee jou 'n lys van die css-reëls wat deur sommige html gebruik word.
Hier is dit aan Kode Pen
Klik op Begin kodebrokkie, klik dan op Volle bladsy om daarby in te kom.Volg dan die instruksies in die brokkie.Jy kan dit volle bladsy laat loop om te sien dat dit met jou html / css werk.
Maar dit is makliker om net my kodepen as 'n hulpmiddel te boekmerk.
/* 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>");Al die gereedskap wat hier gelys word, is ideaal vir CSS.Ek weet nie van Dreamweaver & Co nie.Maar ek het 'n rukkie terug 'n klein program gemaak om my te help om my webwerfprojekte skoon te maak
Dit help nie met CSS en goed nie, maar eerder met weesbeelde en ander soorte lêers.
Hoop dit help!
Helium CSS is 'n wonderlike hulpmiddel hiervoor.Daar moet egter op gelet word dat u hierdie hulpmiddel op 'n ontwikkelings- of plaaslike weergawe van u webwerf moet gebruik.As jy dit op 'n produksieweergawe laat loop, sal jou besoekers die Helium-toetsomgewing kan sien.
Om jou vraag oor 'n instrument te beantwoord om ongebruikte beeldlêers te vind, kan jy gebruik Xenu Link Sleuth om jou werf te spin om al die beelde te vind wat jou werf gebruik.Dan vra Xenu jou vir ftp-toegang sodat dit jou gidse kan deurkruip om weeslêers te vind.Ek het dit nog nie op 'n produksiebediener gebruik nie, maar dit klink waardig om na te kyk.
EDIT:Jy moet net versigtig wees om nie beelde uit te vee wat deur javascript gebruik word nie.
