← 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: PÄÄLLÄ
Vie osoitin elementin yli tutkiaksesi sen CSS-koodia
Rekisteröidy nyt
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS-ominaisuudet Lukittu
<button> .cta-primary
LAATIKOMALLI
margin: 0
padding: 12 24
180 × 48
Typografia
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Asettelu ja välit
displayinline-flex
padding12px 24px
border-radius8px
Ulkonäkö
background#7c3aed
cursorpointer
transitionall 0.2s ease
Kopioi kaikki CSS Muokkaa
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?

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

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