← Atgal į funkcijas
Free

CSS Inspektorius

CSS Inspektorius yra galingas, nemokamas kūrėjų įrankis leidžiantis užvesti pelę ant bet kurio elemento ir akimirksniu pamatyti jo apskaičiuotas CSS savybes.

Nesvarbu, ar taisote maketo problemą, ar studijuojate jums patinkančią svetainę, „CSS Inspector“ suteikia viską, ko jums reikia, švarioje plaukiojančioje panelėje. Lengvai tikrinkite neatidarydami naršyklės „DevTools“.

Tiesioginė peržiūra
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
Pagrindinės savybės

Savybių peržiūra realiuoju laiku

Iš karto matykite šriftus, dydžius, spalvas, tarpus ir dar daugiau, kai užvedate pelę ant bet kurio elemento.

Spustelėkite, kad užfiksuotumėte

Spustelėkite elementą, kad užfiksuotumėte panelę ir ji nedingtų, leidžiant atlikti išsamų patikrinimą.

Tiesioginis stilių redagavimas

Dukart spustelėkite reikšmes, kad jas pakeistumėte tiesiogiai. Jūsų redagavimai iškart atsispindi puslapyje.

Kopijavimas vienu spustelėjimu

Vienu spustelėjimu nukopijuokite atskiras savybes arba visą stiliaus bloką į iškarpinę.

Dėžutės modelio vizualizacija

Vizualiai matykite paraščių, rėmelių ir užpildų reikšmes.

Elemento matmenys ir padėtis

Matykite elemento plotį, aukštį ir padėtį puslapyje.

What You Can Inspect

„CSS Inspector“ rodo daugiau nei 40 savybių:

Tipografija

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

Dėžutės modelis

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

Maketas

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

Fonas

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

Efektai

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Dažni naudojimo atvejai

Maketo problemų sprendimas

Tiksliai patikrinkite nesulygiuotus elementus.

Mokykitės iš esamų dizainų

Studijuokite savo mėgstamų svetainių stilius.

Greiti dizaino eksperimentai

Išbandykite pakeitimus prieš rašydami kodą.

Klientų apžvalgos

Susitikimų metu rodykite tiesioginius pakeitimus.

Stilių išgavimas

Lengvai gaukite CSS kodą naujiems elementams.

Kaip naudoti
1

Aktyvinkite „CSS Inspector“

Spustelėkite „CSS Inspector“ piktogramą „DevSuite Pro“ įrankių juostoje.

2

Užveskite pelę, kad patikrintumėte

Perkelkite kursorių ant bet kurio elemento, kad pamatytumėte savybes.

3

Spustelėkite, kad užfiksuotumėte

Spustelėkite elementą, kad prisegtumėte panelę.

4

Redaguokite stilius

Dukart spustelėkite reikšmes, kad jas pakoreguotumėte.

5

Kopijuokite ir naudokite

Nukopijuokite atnaujintą kodą ir naudokite savo projekte.

Pasiruošę išbandyti? CSS Inspektorius?

Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 39+ kūrėjų įrankius savo naršyklei.

Pridėti prie Chrome Pridėti prie Edge Pridėti prie FireFox