Zu Chrome hinzufügen
← Zurück zu den Funktionen
Free

CSS-Inspektor

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.

Zu Chrome hinzufügen Zu Edge hinzufügen Zu FireFox hinzufügen

Egal, ob Sie Layout-Probleme beheben oder eine Website analysieren möchten, die Ihnen gefällt – der CSS Inspector bietet alles, was Sie brauchen, in einem übersichtlichen, schwebenden Panel. Inspizieren Sie mühelos, ohne die DevTools des Browsers zu öffnen.

Live-Vorschau
example.com/landing-page CSS Inspector: EIN
Bewegen Sie die Maus über ein Element, um dessen CSS zu inspizieren
Jetzt registrieren
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS-Eigenschaften Gesperrt
<button> .cta-primary
BOX-MODELL
margin: 0
padding: 12 24
180 × 48
Typografie
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Abstände
displayinline-flex
padding12px 24px
border-radius8px
Erscheinungsbild
background#7c3aed
cursorpointer
transitionall 0.2s ease
Gesamtes CSS kopieren Bearbeiten
Hauptmerkmale

Echtzeit-Eigenschaftsanzeige

Sehen Sie Schriftarten, Größen, Farben, Abstände und mehr sofort beim Mouseover.

Klicken zum Fixieren

Klicken Sie auf das Element, um das Panel zu fixieren und eine detaillierte Inspektion zu ermöglichen.

Live-Style-Bearbeitung

Doppelklicken Sie auf Werte, um diese direkt zu ändern. Ihre Änderungen werden sofort auf der Seite sichtbar.

Kopieren mit einem Klick

Kopieren Sie einzelne Eigenschaften oder den gesamten Style-Block mit einem Klick in Ihre Zwischenablage.

Box-Modell Visualisierung

Betrachten Sie Margin-, Border- und Padding-Werte visuell.

Elementgröße und Position

Zeigt Breite, Höhe und Position des Elements auf der Seite an.

Was Sie inspizieren können

Der CSS Inspector zeigt über 40 Eigenschaften an:

Typografie

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

Box-Modell

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

Layout

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

Hintergrund

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

Effekte

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Häufige Anwendungsfälle

Layout-Fehlerbehebung

Untersuchen Sie falsch ausgerichtete Elemente präzise.

Von existierenden Designs lernen

Studieren Sie die Styles Ihrer Lieblings-Websites.

Schnelle Design-Experimente

Testen Sie Änderungen, bevor Sie den Code schreiben.

Kunden-Reviews

Zeigen Sie Live-Änderungen während Meetings.

Style-Extraktion

Holen Sie sich einfach den CSS-Code für neue Elemente.

Anwendung
1

CSS Inspector aktivieren

Klicken Sie auf das CSS Inspector-Symbol in der DevSuite Pro-Symbolleiste.

2

Hover zum Inspizieren

Bewegen Sie den Cursor über ein Element, um dessen Eigenschaften zu sehen.

3

Klicken zum Fixieren

Klicken Sie auf das Element, um das Info-Panel anzuheften.

4

Styles bearbeiten

Doppelklicken Sie auf die Werte, um diese anzupassen.

5

Kopieren und Nutzen

Kopieren Sie den aktualisierten Code und verwenden Sie ihn in Ihrem Projekt.

Bereit zum Ausprobieren?

Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.

Zu Chrome hinzufügen Zu Edge hinzufügen Zu FireFox hinzufügen