Inspecteur CSS détaillé sur chaque site avec CSSPeeper pour Chrome

Le panneau Chrome DevTools classique est extrêmement puissant. Il permet à quiconque de se plonger dans une page pour étudier la mise en page, les CSS et même les en-têtes HTTP d'un site, si nécessaire..

Vous pouvez faire beaucoup avec l'inspecteur DevTools CSS. Mais il ne dispose pas d'un panneau d'interface graphique clair et c'est une chose que tout développeur aimerait.

Découvrez CSSPeeper, une extension gratuite de Chrome qui ajoute cet inspecteur d'interface graphique à votre navigateur. Il vous permet d'étudier les propriétés CSS de n'importe quel élément sur n'importe quelle page, bien qu'il soit uniquement conçu pour Chrome pour le moment..

Une fois installé vous venez visitez une page Web et cliquez sur le bouton principal de l'extension dans la barre d’extensions pour Chrome. Une nouvelle fenêtre d’inspecteur apparaît en haut de la page Web avec des détails sur chaque élément principal..

Lorsque vous naviguez sur le site, vous pouvez cliquer sur n’importe quel élément avec un contour en pointillé. Cela peut inclure des boutons, des sections de page, des en-têtes, des éléments de navigation, vous le nommez.

À partir de là, vous obtiendrez un inspecteur complet avec des détails sur la typographie, les choix de couleurs et les styles de police. C'est un excellent moyen de extraire des styles directement à partir d'une page Web sans creuser vous-même le code CSS.

CSSPeeper vous permet même Choisissez des couleurs connexes avec un sélecteur de couleur intégré et générateur de couleurs. Vous pouvez exporter des images à partir de pages, créer votre propre jeu de couleurs et appliquez-les dans vos propres maquettes avec Photoshop ou Sketch.

Je principalement recommander cette extension pour les concepteurs au lieu de développeurs, car il s'agit d'un plugin beaucoup plus convivial, qui extrait le code CSS brut et transforme le code en blocs de données faciles à lire..

Mais ce plugin peut aussi aider les développeurs! C'est vraiment un puissant outil d'inspection de site pour tous les types de CSS.

Consultez la page d'accueil de CSSPeeper pour en savoir plus sur ce qu'il peut faire. La page principale comprend également un lien vers le magasin Chrome afin que vous puissiez installer gratuitement l'extension et la lancer pour un essai..