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: 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
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? CSS-Inspektor?

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

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