L'ordre d'affichage des règles CSS dans les outils de développement Chrome

Question

J'ai examiné une page Web dans Chrome Developer Tools et constaté que les règles CSS sont affichées par ordre alphabétique. J'ai remarqué cela quand j'ai essayé de suivre l'héritage des règles appliquées à un élément à travers tous ses ancêtres.

Y a-t-il un moyen de changer l'ordre dans lequel les règles sont affichées? Ou peut-être que cela est possible en utilisant d'autres outils?

Merci.

Answer 1

Je vous suggère Firebug Lite. Il ne supporte pas toutes les fonctionnalités de firebug bien connu pour firefox mais reste un excellent outil pour le chrome.

Answer 2

Si vous n'êtes pas particulièrement attaché à Chrome, consultez Firebug, l'extension Firefox. Il affiche le sélecteur le plus spécifique en haut de la liste des styles, et les styles en cascade des éléments parents sont listés ci-dessous, en fonction de la proximité de l'élément que vous inspectez.

Answer 3

Vous pouvez éditer l'inspecteur vous-même. Son simplement Html/Js

Check out C:\Users\--your username --\AppData\Local\Google\Chrome\Application\-- latest version --\Resources\Inspector

puisque vous utilisez les outils que je vais supposer que vous savez ce que vous faites pour les modifier :)

Answer 4

Les règles CSS sont affichées dans l'ordre de la cascade, et non dans l'ordre alphabétique. Par conséquent, les propriétés les plus élevées remplacent celles ci-dessous. Si vous avez un cas d'utilisation montrant le contraire, veuillez le déposer en utilisant crbug.com (en mentionnant DevTools dans le résumé) ou en utilisant le lien webkit.org/new-inspector-bug.