← Vissza a funkciókhoz
Free

CSS Inspector

A CSS Inspector egy hatékony fejlesztői eszköz, amely lehetővé teszi, hogy megtekintse bármely elem teljes CSS-tulajdonságait egyszerűen azáltal, hogy fölé viszi az egeret. Kattintson a stílusok rögzítéséhez, szerkessze őket közvetlenül, és lássa a változtatásokat azonnal az oldalon.

Akár egy elrendezési hibát javít, akár egy Önnek tetsző weboldalt tanulmányoz, a CSS Inspector mindent megad, amire szüksége van egy letisztult lebegő panelen. Könnyedén vizsgálódhat a böngésző DevTools megnyitása nélkül.

Élő előnézet
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
Főbb jellemzők

Valós idejű tulajdonság nézet

Azonnal láthatja a betűtípusokat, méreteket, színeket, térközöket és egyebeket, miközben az egérrel az elemek fölé mutat.

Kattintson a rögzítéshez

Kattintson az elemre a panel rögzítéséhez, megakadályozva annak eltűnését, ami lehetővé teszi a részletes vizsgálatot.

Élő stílusszerkesztés

Kattintson duplán az értékekre a közvetlen módosításhoz. A szerkesztések azonnal megjelennek az oldalon.

Egykattintásos másolás

Másoljon egyedi tulajdonságokat vagy a teljes stílusblokkot a vágólapra egyetlen kattintással.

Box Model vizualizáció

Tekintse meg a margin, border és padding értékeket vizuálisan.

Elem méretei és pozíciója

Tekintse meg az elem szélességét, magasságát és pozícióját az oldalon.

Amit vizsgálni tud

A CSS Inspector több mint 40 tulajdonságot mutat meg:

Tipográfia

  • 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

Elrendezés

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

Háttér

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

Effektek

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Gyakori használati esetek

Elrendezési hibák javítása

Vizsgálja meg a rosszul igazított elemeket nagy pontossággal.

Tanulás meglévő tervekből

Tanulmányozza kedvenc weboldalainak stílusait.

Gyors tervezési kísérletek

Tesztelje a változtatásokat a kód megírása előtt.

Ügyfélvélemények

Mutassa be az élő változtatásokat a megbeszélések során.

Stíluskivonatolás

Könnyen kinyerheti a CSS kódot az új elemekhez.

Használati útmutató
1

Aktiválja a CSS Inspectort

Kattintson a CSS Inspector ikonra a DevSuite Pro eszköztárán.

2

Vigye fölé az egeret

Mozgassa a kurzort bármely elem fölé a tulajdonságainak megtekintéséhez.

3

Kattintson a rögzítéshez

Kattintson az elemre a panel rögzítéséhez.

4

Stílusok szerkesztése

Kattintson duplán az értékekre a módosításhoz.

5

Másolás és felhasználás

Másolja ki a frissített kódot, és használja fel projektjében.

Készen áll a kipróbálásra? CSS Inspector?

Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.

Hozzáadás a Chrome-hoz Hozzáadás az Edge-hez Hozzáadás a FireFoxhoz