Ajouter à Chrome
← Retour aux fonctionnalités
Free

Inspecteur CSS

L'inspecteur CSS est un puissant outil de développement qui vous permet de visualiser les propriétés CSS complètes de n'importe quel élément en survolant simplement votre souris dessus. Cliquez pour verrouiller les styles, modifiez-les directement et voyez vos changements s'appliquer instantanément sur la page.

Ajouter à Chrome Ajouter à Edge Ajouter à FireFox

Que vous corrigiez un problème de mise en page ou que vous étudiiez un site web que vous aimez, l'inspecteur CSS vous donne tout ce dont vous avez besoin dans un panneau flottant propre. Inspectez facilement sans ouvrir les DevTools du navigateur.

Prévisualisation en direct
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Caractéristiques principales

Vue des propriétés en temps réel

Visualisez instantanément les polices, tailles, couleurs, espacements et plus encore lors du survol de n'importe quel élément.

Cliquez pour verrouiller

Cliquez sur l'élément pour verrouiller le panneau et l'empêcher de disparaître, permettant une inspection détaillée.

Édition des styles en direct

Double-cliquez sur les valeurs pour les modifier directement. Vos modifications sont immédiatement répercutées sur la page.

Copier en un clic

Copiez des propriétés individuelles ou le bloc de style complet dans votre presse-papiers en un seul clic.

Visualisation du Box Model

Visualisez les valeurs de marge, de bordure et de rembourrage.

Dimensions et position de l'élément

Affichez la largeur, la hauteur et la position de l'élément sur la page.

Ce que vous pouvez inspecter

L'inspecteur CSS affiche plus de 40 propriétés :

Typographie

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Modèle de boîte

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Mise en page

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Arrière-plan

  • background-color
  • background-image
  • background-size
  • background-position

Effets

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Cas d'utilisation courants

Correction des problèmes de mise en page

Inspectez les éléments mal alignés avec précision.

Apprendre des designs existants

Étudiez les styles de vos sites web préférés.

Expériences de design rapides

Testez les changements avant d'écrire le code.

Revues avec les clients

Montrez les changements en direct lors des réunions.

Extraction de style

Obtenez facilement le code CSS pour de nouveaux éléments.

Comment utiliser
1

Activer l'inspecteur CSS

Cliquez sur l'icône de l'inspecteur CSS dans la barre d'outils DevSuite Pro.

2

Survolez pour inspecter

Passez votre curseur sur n'importe quel élément pour voir ses propriétés.

3

Cliquez pour verrouiller

Cliquez sur l'élément pour épingler le panneau.

4

Modifier les styles

Double-cliquez sur les valeurs pour les ajuster.

5

Copier et utiliser

Copiez le code modifié et utilisez-le dans votre projet.

Prêt à essayer ? Inspecteur CSS?

Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.

Ajouter à Chrome Ajouter à Edge Ajouter à FireFox