Die Styles, die zählen
Ohne durchgestrichene Regeln: Schrift, Größe, Stärke, Zeilenhöhe, Farbe, Hintergrund, Rahmen, Radius und Schatten.
Design-Inspektion
CSS-Inspektor: Maus darüber, und Sie sehen, wie die Seite gebaut ist
Der CSS-Inspektor von Smart Design Inspector zeigt per Mouseover die berechneten Styles, die Box, die Margins, die Paddings und die Abstände jedes Elements – ohne die Entwicklertools zu öffnen.
Inspizieren, Abstände messen und Lineal: für immer kostenlos
h1 · ihrkunde.example
- Schrift
- Inter
- Größe
- 48 px
- Stärke
- 600
- Zeilenhöhe
- 1,1
- Farbe
- #0B0B0B
- Hintergrund
- transparent
- Rahmen
- —
- Radius
- 0
- Schatten
- —
CSS kopieren
margin024
border0
padding0
560 × 106
| Bis zum Button | 24 px |
| Bis zum Absatz | 16 px |
| Bis zum linken Rand | 64 px |
01
DevTools sind nicht fürs Design gemacht
Das ProblemUm in den DevTools die Schriftgröße einer Überschrift herauszufinden, müssen Sie das Panel öffnen, das Element im Baum suchen und sich durch eine Liste durchgestrichener Regeln scrollen. Für den Abstand zwischen zwei Blöcken addieren Sie Margins von Hand.
02
Was Sie per Mouseover sehen
4 DingeBox
Breite, Höhe, Margins und Paddings direkt auf dem Element eingezeichnet.
Abstände
Fixieren Sie ein Element per Klick und fahren Sie über ein anderes: Sie sehen die Pixel dazwischen.
Lineal
Halten Sie Alt gedrückt und messen Sie jeden Bereich der Seite.
03
Probieren Sie es auf dieser Seite
Ohne InstallationEine Beispiel-Website und das Inspektor-Panel, ohne etwas zu installieren. Fahren Sie mit der Maus über ein Element oder wählen Sie es in der Liste: Sie sehen seine Styles, seine Box und den Abstand zum Element darunter.
Element wählen
Smart Design Inspector · CSSh1.hero-title
- Schrift
- —
- Größe
- —
- Stärke
- —
- Zeilenhöhe
- —
- Farbe
- —
- Hintergrund
- —
- Rahmen
- —
- Radius
- —
- Schatten
- —
- Box
- —
- Margin
- —
- Padding
- —
Abstand nach unten
—
Beispiel-Website · die Werte werden von dieser Seite gelesen
04
Nach dem Inspizieren
4 FunktionenSie möchten
Die Farben und die Typografie der ganzen Seite mitnehmen
Designsystem extrahieren →Sie möchten
Diesen Abschnitt in Ihr Projekt kopieren
In Tailwind umwandeln →Sie möchten
Wissen, welche Schrift es ist und welche Lizenz sie hat
Schriften einer Website →Sie möchten
Das Design mit anderen Websites vergleichen
Websites vergleichen →| Kostenlos0 €für immer | Pro49 €Einmalzahlung | |
|---|---|---|
| Per Mouseover inspizieren: berechnetes CSS, Box, Margins und Paddings | ||
| Das CSS jedes Elements kopieren | ||
| Abstände zwischen Elementen messen und Lineal | ||
| Einen Abschnitt als JSX + Tailwind oder HTML/CSS kopieren | — | Vorabzugang kostenlos |
| Das Designsystem exportieren | — | Vorabzugang kostenlos |
Ist es kostenlos?
Ja. Inspizieren, Abstände messen und das Lineal sind für immer kostenlos.
Was ist der Unterschied zu den DevTools?
Es zeigt nur die Styles, die tatsächlich greifen, ohne durchgestrichene Regeln, und zeichnet Maße und Abstände direkt auf die Seite. Zum Debuggen von JavaScript oder Netzwerk bleiben die DevTools die bessere Wahl.
Funktioniert es auf jeder Website?
Auf jeder Seite, die sich in Chrome öffnen lässt. Interne Browserseiten und der Chrome Web Store selbst lassen sich von Erweiterungen nicht auslesen.
Kann ich das CSS kopieren?
Ja, das jedes Elements. Um einen ganzen Abschnitt als JSX + Tailwind oder HTML/CSS zu kopieren, gibt es die Pro-Funktion.
In welchen Browsern und auf welchen Systemen läuft sie?
In Chrome, Edge, Brave, Arc, Opera und Vivaldi, unter Windows, Mac und Linux, ab Version 1.0. Sie läuft überall gleich, weil der Browser die Erweiterung ausführt, nicht das Betriebssystem. Der Code ist so vorbereitet, dass sie ohne Neuschreiben auf Firefox und Safari kommen kann. Während der Entwicklung kann sich noch etwas ändern.
Warteliste
Gehören Sie zu den Ersten, die es testen
Smart Design Inspector ist in Entwicklung. Hinterlassen Sie Ihre E-Mail-Adresse, und wir benachrichtigen Sie am Tag der Veröffentlichung im Chrome Web Store – mit den 7 Pro-Funktionen kostenlos im Vorabzugang.
Eine E-Mail am Starttag und nur wenige weitere · Abmeldung mit einem Klick