Outils de développement Chrome - un moyen de voir quel CSS est utilisé par la page actuelle?

À l'aide des outils de développement Chrome de Google, j'effectue parfois des audits sur mon code pour voir comment il se forme. L'une des suggestions que ces outils font toujours est «Règles CSS non utilisées supprimées». Cliquer sur la flèche affiche alors une liste généralement énorme des règles CSS qui ne sont pas utilisées par la page en cours.Outils de développement Chrome - un moyen de voir quel CSS est utilisé par la page actuelle?

Existe-t-il un moyen de voir une liste des règles CSS qui sont utilisées par la page en cours?

Source

2010-10-14 sscirrus

Je ne crois pas que les outils de développement Chrome ont une façon de faire, non. Quelqu'un pourrait avoir écrit un outil distinct pour le faire, cependant. – Amber

Je pense que Google Page Speed vous indiquera les règles CSS inutilisées. Peut-être que c'est le contraire de ce que vous demandez. Au moins, comment cela fonctionne dans Firefox. –

@Michael - oui, c'est le contraire. Les outils Chrome affichent déjà une liste de CSS inutilisés. – sscirrus

Appuyez sur CTRL-MAJ-J pour accéder aux outils de développement de Google Chrome. Là, vous pouvez choisir l'onglet des ressources, choisissez de les activer sur la gauche et rafraîchir la page si nécessaire. Il affichera tous les fichiers chargés, y compris les feuilles de style.

Source

2011-01-24 20:58:13 plebksig

Cela ne répond pas à la question neXib. Je demande comment trouver des règles CSS spécifiques sont utilisées par la page en cours, pas les feuilles de style sont chargés. – sscirrus

Ah désolé. Mais il est judicieux de montrer les styles qui ne sont pas utilisés, car ils n'existent pas dans les feuilles de style, mais en indiquant ceux qui sont utilisés, ils seront difficiles à utiliser à cause de la hiérarchie, donc pour moi, cela n'a aucun sens. S'il est dit que le style li.horse est utilisé, mais plus tard, vous aurez défini .mane. Qui ne sera pas très utilisable. – plebksig

Je sais que cela peut être un peu en retard, mais dans le cas où quelqu'un d'autre tombe par hasard sur ce que je faisais et est aussi curieux que je trouve la poussière-Me Selectors add-on pour Firefox vous indiquera les deux sélecteurs utilisés et non utilisés sur la page pour chaque feuille de style utilisée.

Hope this helps

Source

2012-02-01 01:50:24 sbditto85

Les outils de développement sont open source afin que vous puissiez créer un patch.
http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html

snipp

//=== modified file 'AuditRules.js' 
if (!testedSelectors[rule.selectorText] || foundSelectors[rule.selectorText]) 
{ 
    usedCss += "\n" + rule.selectorText + " {" + rule.style.cssText + "}\n"; 
    continue; 
} 
//... 
// Save only used css rules. 
InspectorFrontendHost.saveAs("used.css", usedCss);

Source

2014-05-01 19:49:46 GDmac

Outils de développement Chrome - un moyen de voir quel CSS est utilisé par la page actuelle?

Répondre

Questions connexes