← Takaisin ominaisuuksiin
Free

CSS Inspector

CSS Inspector on tehokas kehittäjätyökalu, jonka avulla voit tarkastella minkä tahansa elementin täydellisiä CSS-ominaisuuksia viemällä hiiren sen päälle. Napsauta lukitaksesi tyylit, muokkaa niitä suoraan ja näe muutokset välittömästi sivulla.

Olipa kyseessä asettelun korjaaminen tai suosikkisivustosi tyylien tutkiminen, CSS Inspector tarjoaa kaiken tarvitsemasi selkeässä kelluvassa paneelissa. Tarkasta helposti avaamatta selaimen kehittäjätyökaluja.

Reaaliaikainen esikatselu
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
Keskeiset ominaisuudet

Reaaliaikainen ominaisuusnäkymä

Näe fontit, koot, värit, välit ja muut välittömästi, kun liikut minkä tahansa elementin päällä.

Napsauta lukitaksesi

Napsauta elementtiä lukitaksesi paneelin ja estääksesi sen katoamisen, mikä mahdollistaa yksityiskohtaisen tarkastelun.

Tyylien live-muokkaus

Kaksoisnapsauta arvoja muuttaaksesi niitä suoraan. Muutoksesi näkyvät heti sivulla.

Kopiointi yhdellä napsautuksella

Kopioi yksittäiset ominaisuudet tai koko tyyli-lohko leikepöydälle yhdellä napsautuksella.

Box Model -visualisointi

Näe marginaali-, reunus- ja täyte-arvot visuaalisesti.

Elementin mitat ja sijainti

Näe elementin leveys, korkeus ja sijainti sivulla.

Mitä voit tarkastaa

CSS Inspector näyttää yli 40 ominaisuutta:

Typografia

  • 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

Asettelu

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

Tausta

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

Tehosteet

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Yleiset käyttötapaukset

Asetteluongelmien korjaaminen

Tarkasta väärin kohdistetut elementit tarkasti.

Oppiminen olemassa olevista malleista

Tutki suosikkisivustojesi tyylejä.

Nopeat suunnittelukokeilut

Testaa muutoksia ennen koodin kirjoittamista.

Asiakaskatselmukset

Näytä muutokset reaaliajassa kokousten aikana.

Tyylin purkaminen

Hanki CSS-koodi uusille elementeille helposti.

Käyttöohjeet
1

Aktivoi CSS Inspector

Napsauta DevSuite Pro -työkalupalkin CSS Inspector -kuvaketta.

2

Vie hiiri päälle tarkastaaksesi

Vie kursoriminkä tahansa elementin päälle nähdäksesi sen ominaisuudet.

3

Napsauta lukitaksesi

Napsauta elementtiä kiinnittääksesi paneelin.

4

Muokkaa tyylejä

Kaksoisnapsauta arvoja säätääksesi niitä.

5

Kopioi ja käytä

Kopioi muokattu koodi ja käytä sitä projektissasi.

Valmis kokeilemaan? CSS Inspector?

Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.

Lisää Chromeen Lisää Edgeen Lisää FireFoxiin