← Povratak na značajke
Free

CSS Inšpektor

CSS Inspector je moćan razvojni alat koji vam omogućuje pregled potpunih CSS svojstava bilo kojeg elementa jednostavnim prelaskom miša preko njega. Kliknite da biste zaključali stilove, uredili ih izravno i vidjeli kako se vaše promjene trenutno primjenjuju na stranicu.

Bez obzira na to popravljate li problem s izgledom ili proučavate web stranicu koja vam se sviđa, CSS Inspector vam daje sve što trebate u čistom plutajućem panelu. Pregledajte s lakoćom bez otvaranja DevTools preglednika.

Pregled uživo
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
Ključne značajke

Pregled svojstava u stvarnom vremenu

Odmah pogledajte fontove, veličine, boje, razmake i još mnogo toga dok prelazite preko bilo kojeg elementa.

Klikni za zaključavanje

Kliknite na element da biste zaključali panel i spriječili njegovo nestajanje, omogućujući detaljan pregled.

Uređivanje stilova uživo

Dvaput kliknite na vrijednosti da biste ih izravno promijenili. Vaša uređivanja odmah se odražavaju na stranici.

Kopiranje jednim klikom

Kopirajte pojedinačna svojstva ili cijeli blok stilova u međuspremnik jednim klikom.

Vizualizacija Box Modela

Vizualno pregledajte vrijednosti margin, border i padding.

Dimenzije i položaj elemenata

Pogledajte širinu, visinu i položaj elementa na stranici.

Što možete pregledati

CSS Inspector prikazuje više od 40 svojstava:

Tipografija

  • 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

Izgled

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

Pozadina

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

Efekti

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Uobičajeni primjeri upotrebe

Rješavanje problema s izgledom

Pregledajte neusklađene elemente s preciznošću.

Učenje iz postojećih dizajna

Proučite stilove svojih omiljenih web stranica.

Brzi eksperimenti dizajna

Testirajte promjene prije pisanja koda.

Recenzije klijenata

Pokažite promjene uživo tijekom sastanaka.

Ekstrakcija stila

Lako nabavite CSS kod za nove elemente.

Kako koristiti
1

Aktivirajte CSS Inspector

Kliknite na ikonu CSS Inspector na alatnoj traci DevSuite Pro.

2

Pređite mišem za pregled

Pomaknite kursor preko bilo kojeg elementa da biste vidjeli njegova svojstva.

3

Klikni za zaključavanje

Kliknite na element da biste prikvačili panel.

4

Uredite stilove

Dvaput kliknite na vrijednosti da biste ih prilagodili.

5

Kopiraj i koristi

Kopirajte ažurirani kod i koristite ga u svom projektu.

Spremni za isprobavanje? CSS Inšpektor?

Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.

Dodaj u Chrome Dodaj u Edge Dodaj u FireFox