Inspecteur CSS

Que vous soyez en train de déboguer un problème de mise en page, de reverse-engineer un design qui vous plaît, ou simplement de vérifier des valeurs d'espacement et de typographie, CSS Inspector vous donne tout ce qu'il faut dans un panneau flottant épuré. Contrairement aux DevTools du navigateur, il ne vous encombre pas — pas de panneau ancré, pas de viewport redimensionné. Il suffit de survoler, cliquer et inspecter. L'outil affiche les styles calculés (ce que le navigateur affiche réellement), et pas seulement le CSS écrit dans le fichier source. Cela signifie que vous voyez les valeurs réelles une fois l'héritage, la spécificité et la cascade résolus — les mêmes valeurs qui déterminent ce que les utilisateurs voient à l'écran.

Inspecter un élément ne déclenche jamais de reflow ni de repaint de la page elle-même, vous pouvez donc explorer librement sans craindre de perturber la position de défilement, les animations ou l'état JavaScript. Les pseudo-éléments comme ::before et ::after sont également pris en charge — survolez le parent et le panneau affiche les styles du contenu généré séparément de ceux de l'élément lui-même. Les propriétés personnalisées CSS (variables) sont résolues à leur valeur finale calculée, mais le panneau vous indique aussi le nom de la variable qui l'a produite, afin que vous puissiez retracer une couleur ou une valeur d'espacement jusqu'à son design token d'origine plutôt que de simplement voir un nombre de pixels brut.

Au quotidien, la plupart des développeurs utilisent CSS Inspector des dizaines de fois par session — pour vérifier pourquoi une marge s'est effondrée, confirmer un code hexadécimal avant de le copier dans une feuille de style, ou vérifier qu'un breakpoint de media query a bien appliqué les styles prévus. Comme il s'agit d'un panneau flottant plutôt que d'un mode plein navigateur, vous pouvez le laisser ouvert en changeant d'onglet pour consulter votre éditeur de code ou un fichier de design, puis revenir directement au même élément survolé sans perdre le fil.