Les styles qui comptent
Sans règles barrées : police, taille, graisse, interligne, couleur, fond, bordures, rayon et ombre.
Inspection du design
Inspecteur CSS : survolez et voyez comment la page est construite
L’inspecteur CSS de Smart Design Inspector affiche les styles calculés, la boîte, les marges, les paddings et les distances de n’importe quel élément au survol, sans ouvrir les outils de développement.
Inspecter, mesurer les distances et la règle : gratuit pour toujours
h1 · votreclient.example
- Police
- Inter
- Taille
- 48 px
- Graisse
- 600
- Interligne
- 1,1
- Couleur
- #0B0B0B
- Fond
- transparent
- Bordures
- —
- Rayon
- 0
- Ombre
- —
Copier le CSS
margin024
border0
padding0
560 × 106
| Jusqu’au bouton | 24 px |
| Jusqu’au paragraphe | 16 px |
| Jusqu’au bord gauche | 64 px |
01
Les DevTools ne sont pas faits pour le design
Le problèmeDans les DevTools, pour connaître la taille de police d’un titre, il faut ouvrir le panneau, chercher l’élément dans l’arbre et parcourir une liste de règles barrées. Pour connaître la distance entre deux blocs, il faut additionner les marges à la main.
02
Ce que vous voyez au survol
4 élémentsBoîte
Largeur, hauteur, marges et paddings dessinés sur l’élément.
Distances
Épinglez un élément d’un clic et survolez-en un autre : vous voyez les pixels qui les séparent.
Règle
Maintenez la touche Alt enfoncée et mesurez n’importe quelle zone de la page.
03
Essayez-le sur cette page
Sans installationUn site web d’exemple et le panneau de l’inspecteur, sans rien installer. Survolez un élément, ou choisissez-le dans la liste, et voyez ses styles, sa boîte et la distance à l’élément du dessous.
Choisissez un élément
Smart Design Inspector · CSSh1.hero-title
- Police
- —
- Taille
- —
- Graisse
- —
- Interligne
- —
- Couleur
- —
- Fond
- —
- Bordures
- —
- Rayon
- —
- Ombre
- —
- Boîte
- —
- Marge
- —
- Padding
- —
Distance vers le bas
—
Site d’exemple · les valeurs sont lues sur cette page
04
Après l’inspection
4 fonctionsVous voulez
Récupérer les couleurs et la typographie de toute la page
Extraire le design system →Vous voulez
Copier cette section dans votre projet
Convertir en Tailwind →Vous voulez
Savoir quelle police c’est et sa licence
Polices d’un site web →Vous voulez
Comparer le design avec celui d’autres sites
Comparer des sites web →| Gratuit0 €pour toujours | Pro49 €paiement unique | |
|---|---|---|
| Inspecter au survol : CSS calculé, boîte, marges et paddings | ||
| Copier le CSS de chaque élément | ||
| Mesurer les distances entre éléments, et règle | ||
| Copier une section en JSX + Tailwind ou HTML/CSS | — | Accès anticipé gratuit |
| Exporter le design system | — | Accès anticipé gratuit |
Est-ce gratuit ?
Oui. Inspecter, mesurer les distances et la règle sont gratuits pour toujours.
En quoi est-ce différent des DevTools ?
Il n’affiche que les styles appliqués, sans règles barrées, et dessine les mesures et les distances sur la page. Les DevTools restent meilleurs pour déboguer le JavaScript ou le réseau.
Est-ce que ça fonctionne sur tous les sites ?
Sur toute page qui s’ouvre dans Chrome. Les pages internes du navigateur et le Chrome Web Store lui-même ne laissent pas les extensions les lire.
Puis-je copier le CSS ?
Oui, celui de chaque élément. Pour copier une section entière en JSX + Tailwind ou HTML/CSS, il y a la fonction Pro.
Sur quels navigateurs et systèmes fonctionne-t-elle ?
Sur Chrome, Edge, Brave, Arc, Opera et Vivaldi, sous Windows, Mac et Linux, dès la 1.0. Elle fonctionne partout de la même façon, car c’est le navigateur qui exécute l’extension, pas le système. Le code est prêt à être porté sur Firefox et Safari sans réécriture. Pendant le développement, des changements sont possibles.
Liste d’attente
Soyez parmi les premiers à l’essayer
Smart Design Inspector est en cours de développement. Laissez-nous votre e-mail et nous vous préviendrons le jour de sa sortie sur le Chrome Web Store, avec les 7 fonctions Pro gratuites en accès anticipé.
Un e-mail le jour du lancement et très peu d’autres · Désinscription en un clic