← Atpakaļ uz funkcijām
Free

CSS Inspektors

CSS Inspektors ir jaudīgs, bezmaksas izstrādātāju rīks, kas ļauj virzīt kursoru pār jebkuru elementu un nekavējoties redzēt tā aprēķinātās CSS īpašības.

Neatkarīgi no tā, vai labojat izkārtojuma problēmas vai pētāt vietni, kas jums patīk, CSS Inspector nodrošina visu nepieciešamo tīrā, peldošā panelī. Pārbaudiet viegli, neatverot pārlūka DevTools.

Tiešraides priekšskatījums
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
Galvenās funkcijas

Īpašību skatīšanā reāllaikā

Uzreiz redziet fontus, izmērus, krāsas, atstarpes un daudz ko citu, virzot kursoru pār jebkuru elementu.

Noklikšķiniet, lai fiksētu

Noklikšķiniet uz elementa, lai fiksētu paneli un tas nepazustu, ļaujot veikt detalizētu pārbaudi.

Stilu rediģēšanā tiešraidē

Veiciet dubultklikšķi uz vērtībām, lai tās mainītu tieši. Jūsu rediģējumi uzreiz atspoguļojas lapā.

Viena klikšķa kopēšana

Ar vienu klikšķi nokopējiet atsevišķas īpašības vai visu dizaina stila bloku starpliktuvē.

Kastes modeļa vizualizācija

Vizuāli redziet piemales, apmales un polsterējuma vērtības.

Elementa izmēri un pozīcija

Parāda elementa platumu, augstumu un pozīciju lapā.

Ko jūs varat pārbaudīt

CSS Inspector parāda vairāk nekā 40 īpašības:

Tipogrāfija

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

Kastes modelis

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

Izkārtojums

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

Fons

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

Efekti

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Biežākie lietošanas veidi

Izkārtojuma problēmu novēršana

Precīzi pārbaudiet nelīdzinātus elementus.

Mācieties no esošajiem dizainiem

Pētiet savu iecienītāko vietņu stilus.

Ātri dizaina eksperimenti

Pārbaudiet izmaiņas pirms koda rakstīšanas.

Klientu atsauksmes

Parādiet tiešraides izmaiņas sapulču laikā.

Stilu ieguve

Viegli iegūstiet CSS kodu jaunajiem elementiem.

Kā lietot
1

Aktivizējiet CSS Inspector

Noklikšķiniet uz CSS Inspector ikonas DevSuite Pro rīkjoslā.

2

Virziet kursoru, lai pārbaudītu

Pārvietojiet kursoru pār jebkuru elementu, lai redzētu īpašības.

3

Noklikšķiniet, lai fiksētu

Noklikšķiniet uz elementa, lai piespraustu paneli.

4

Rediģējiet stilus

Veiciet dubultklikšķi uz vērtībām, lai tās pielāgotu.

5

Kopējiet un izmantojiet

Nokopējiet atjaunināto kodu un izmantojiet to savā projektā.

Gatavs izmēģināt? CSS Inspektors?

Instalējiet DevSuite Pro bez maksas un atbloķējiet 39+ izstrādātāju rīkus savam pārlūkam.

Pievienot pārlūkam Chrome Pievienot Edge Pievienot pārlūkam FireFox