Der CSS Inspector ist ein leistungsstarkes Entwickler-Tool, mit dem Sie alle CSS-Eigenschaften eines Elements sehen können, indem Sie einfach mit der Maus darüberfahren. Klicken Sie, um die Styles zu fixieren, bearbeiten Sie diese direkt und sehen Sie, wie die Änderungen sofort auf der Seite übernommen werden.
Egal, ob Sie ein Layout-Problem debuggen, ein Design reverse-engineeren, das Sie bewundern, oder einfach nur Abstände und Typografie-Werte schnell überprüfen möchten – der CSS Inspector bietet Ihnen alles, was Sie brauchen, in einem übersichtlichen, frei schwebenden Panel. Im Gegensatz zu den Browser DevTools steht er Ihnen nie im Weg – keine angedockten Panels, kein verkleinerter Viewport. Einfach hovern, klicken und inspizieren. Das Tool zeigt die berechneten Styles (also das, was der Browser tatsächlich rendert), nicht nur das ursprünglich geschriebene CSS. Das bedeutet, Sie sehen die realen Werte, nachdem Vererbung, Spezifität und Kaskadierung aufgelöst wurden – genau die Werte, die bestimmen, was Nutzer tatsächlich auf dem Bildschirm sehen.
Das Inspizieren eines Elements löst nie einen Reflow oder Repaint der Seite selbst aus, sodass Sie frei erkunden können, ohne sich um Scroll-Position, Animationen oder JavaScript-Zustand sorgen zu müssen. Auch Pseudo-Elemente wie ::before und ::after werden unterstützt – hovern Sie das Elternelement, und das Panel zeigt die Styles des generierten Inhalts getrennt von den eigenen Styles des Elements an. CSS Custom Properties (Variablen) werden zu ihrem finalen berechneten Wert aufgelöst, aber das Panel zeigt Ihnen auch den Variablennamen, der diesen Wert erzeugt hat, sodass Sie eine Farbe oder einen Abstandswert bis zu ihrem Design-Token zurückverfolgen können, statt nur eine rohe Pixelzahl zu sehen.
Im Arbeitsalltag greifen die meisten Entwickler dutzende Male pro Sitzung zum CSS Inspector – um zu prüfen, warum ein Margin kollabiert ist, einen Hex-Code zu bestätigen, bevor er in ein Stylesheet kopiert wird, oder zu verifizieren, dass ein Media-Query-Breakpoint tatsächlich die vorgesehenen Styles angewendet hat. Da es sich um ein frei schwebendes Panel und keinen browserweiten Modus handelt, können Sie es geöffnet lassen, während Sie zu Ihrem Code-Editor oder einer Design-Datei wechseln, und danach direkt zum selben Element zurückkehren, ohne die Stelle zu verlieren.
Sehen Sie Schriftarten, Größen, Farben, Abstände und mehr sofort beim Mouseover.
Klicken Sie auf das Element, um das Panel zu fixieren und eine detaillierte Inspektion zu ermöglichen.
Doppelklicken Sie auf Werte, um diese direkt zu ändern. Ihre Änderungen werden sofort auf der Seite sichtbar.
Kopieren Sie einzelne Eigenschaften oder den gesamten Style-Block mit einem Klick in Ihre Zwischenablage.
Betrachten Sie Margin-, Border- und Padding-Werte visuell.
Zeigt Breite, Höhe und Position des Elements auf der Seite an.
Der CSS Inspector zeigt über 40 Eigenschaften an:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorUntersuchen Sie falsch ausgerichtete Elemente präzise.
Studieren Sie die Styles Ihrer Lieblings-Websites.
Testen Sie Änderungen, bevor Sie den Code schreiben.
Zeigen Sie Live-Änderungen während Meetings.
Holen Sie sich einfach den CSS-Code für neue Elemente.
Klicken Sie auf das CSS Inspector-Symbol in der DevSuite Pro-Symbolleiste.
Bewegen Sie den Cursor über ein Element, um dessen Eigenschaften zu sehen.
Klicken Sie auf das Element, um das Info-Panel anzuheften.
Doppelklicken Sie auf die Werte, um diese anzupassen.
Kopieren Sie den aktualisierten Code und verwenden Sie ihn in Ihrem Projekt.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.