← Tilbake til funksjoner
Free

CSS Inspector

CSS Inspector er et kraftig utviklerverktøy som lar deg se alle CSS-egenskapene til ethvert element bare ved å holde musepekeren over det. Klikk for å låse stilene, rediger dem direkte, og se endringene bli brukt umiddelbart på siden.

Enten du fikser layoutproblemer eller studerer et nettsted du liker, gir CSS Inspector alt du trenger i et ryddig, flytende panel. Inspiser enkelt uten å åpne nettleserens 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
Hovedfunksjoner

Egenskapsvisning i sanntid

Se fonter, størrelser, farger, avstander og mer umiddelbart når du holder pekeren over et element.

Klikk for å låse

Klikk på et element for å låse panelet slik at det ikke forsvinner, noe som tillater detaljert inspeksjon.

Live stilredigering

Dobbeltklikk på verdier for å endre dem direkte. Redigeringene dine reflekteres umiddelbart på siden.

Ett-klikks kopiering

Kopier individuelle egenskaper eller hele designstilblokken til utklippstavlen med ett klikk.

Boksmodell-visualisering

Se marger, rammer og padding-verdier visuelt.

Elementstørrelse og posisjon

Viser elementets bredde, høyde og posisjon på siden.

Hva du kan inspisere

CSS Inspector viser over 40 egenskaper:

Typografi

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

Boksmodell

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

Layout

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

Bakgrunn

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

Effekter

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Vanlige bruksområder

Feilsøking av layoutproblemer

Inspiser elementer som ikke er justert med presisjon.

Lær av eksisterende design

Studer stilene til favorittnettstedene dine.

Raske designeksperimenter

Test endringer før du skriver kode.

Kundeanmeldelser

Vis live-endringer under møter.

Stiluttrekking

Få CSS-koden for nye elementer enkelt.

Slik bruker du det
1

Aktiver CSS Inspector

Klikk på CSS Inspector-ikonet i DevSuite Pro-verktøylinjen.

2

Hold pekeren over for å inspisere

Beveg markøren over et element for å se egenskapene dess.

3

Klikk for å låse

Klikk på elementet for å feste panelet.

4

Rediger stiler

Dobbeltklikk på verdier for å justere dem.

5

Kopier og bruk

Kopier den oppdaterte koden og bruk den i prosjektet ditt.

Klar til å prøve? CSS Inspector?

Installer DevSuite Pro gratis og lås opp 39+ utviklerverktøy for nettleseren din.

Legg til i Chrome Legg til i Edge Legg til i FireFox