← Tilbage til funktioner
Free

CSS Inspector

CSS Inspector-værktøjet er et kraftfuldt udviklerværktøj, der giver dig mulighed for at se alle CSS-egenskaber for et hvilket som helst element, blot ved at holde musen over det. Klik for at låse typografier, rediger dem direkte, og se ændringerne blive anvendt på siden med det samme.

Uanset om du fejlfinder layoutproblemer eller studerer et websted, du kan lide, giver CSS Inspector alt, hvad du behøver, i et rent, flydende panel. Inspicer nemt uden at åbne browserens DevTools.

Live forhåndsvisning
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
Nøglefunktioner

Visning af egenskaber i realtid

Se skrifttyper, størrelser, farver, afstande og meget mere med det samme, når du holder musen over et element.

Klik for at låse

Klik på elementet for at låse panelet, så det ikke forsvinder, hvilket muliggør detaljeret inspektion.

Live redigering af typografi

Dobbeltklik på værdier for at ændre dem direkte. Dine redigeringer vil blive afspejlet med det samme på siden.

Kopiering med ét klik

Kopier individuelle egenskaber eller hele designblokken til din udklipsholder med et enkelt klik.

Box Model Visualisering

Se værdier for margin, border og padding visuelt.

Elementstørrelse og position

Viser elementets bredde, højde og position på siden.

Hvad du kan inspicere

CSS Inspector viser over 40 egenskaber:

Typografi

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

Box Model

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

Layout

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

Baggrund

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

Effekter

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Almindelige brugstilfælde

Fejlfinding af layout

Inspicer fejljusterede elementer med præcision.

Lær af eksisterende designs

Studer typografier på dine yndlingswebsteder.

Hurtige designeksperimenter

Test ændringer, før du skriver kode.

Kundeanmeldelser

Vis live-ændringer under møder.

Typografiudtræk

Hent nemt CSS-kode til nye elementer.

Sådan bruger du det
1

Aktiver CSS Inspector

Klik på CSS Inspector-ikonet i DevSuite Pro-værktøjslinjen.

2

Hold over for at inspicere

Flyt markøren over et element for at se dets egenskaber.

3

Klik for at låse

Klik på elementet for at fastgøre informationspanelet.

4

Rediger typografier

Dobbeltklik på værdier for at justere dem.

5

Kopier og brug

Kopier den opdaterede kode og brug den i dit projekt.

Klar til at prøve? CSS Inspector?

Installer DevSuite Pro gratis og lås op for 39+ udviklerværktøjer til din browser.

Tilføj til Chrome Tilføj til Edge Tilføj til FireFox