← Späť na funkcie
Free

CSS Inšpektor

CSS Inšpektor je výkonný, bezplatný vývojársky nástroj, ktorý vám umožňuje prejsť kurzorom nad akýkoľvek prvok na webovej stránke a okamžite zobraziť jeho kompletné vypočítané CSS vlastnosti.

Či už opravujete problémy s rozložením alebo študujete webovú stránku, ktorá sa vám páči, CSS Inspector poskytuje všetko, čo potrebujete, v čistom plávajúcom paneli. Kontrolujte jednoducho bez otvárania prehliadačových nástrojov DevTools.

Živý náhľad
example.com/landing-page CSS Inspector: ZAPNUTÉ
Prejdite si myšou kdekoľvek na prvok na kontrolu jeho CSS
Prihlásiť sa
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS vlastnosti Uzamknuté
<button> .cta-primary
MODEL KRABICE
margin: 0
padding: 12 24
180 × 48
Typografia
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Rozloženie a rozostup
displayinline-flex
padding12px 24px
border-radius8px
Vzhľad
background#7c3aed
cursorpointer
transitionall 0.2s ease
Kopírovať všechny CSS Upraviť
Kľúčové vlastnosti

Zobrazenie vlastností v reálnom čase

Okamžite uvidíte písma, veľkosti, farby, rozstupy a ďalšie informácie pri prejdení myšou nad ľubovoľným prvkom.

Kliknutím uzamknete

Kliknite na prvok, aby ste panel uzamkli a nezmizol, čo umožní podrobnú kontrolu.

Živá úprava štýlov

Dvojitým kliknutím na hodnoty ich zmeníte priamo. Vaše úpravy sa okamžite prejavia na stránke.

Kopírovanie jedným kliknutím

Kliknutím skopírujete jednotlivé vlastnosti alebo celý blok štýlov do schránky.

Vizualizácia box modelu

Vizuálne zobrazte hodnoty okrajov (margin), ohraničení (border) a paddingu.

Veľkosť a pozícia prvku

Zobrazuje šírku, výšku a pozíciu prvku na stránke.

Čo môžete kontrolovať

CSS Inspector zobrazuje viac ako 40 vlastností:

Typography

  • 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

Rozloženie

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

Pozadie

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

Effects

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Bežné prípady použitia

Riešenie problémov s rozložením

Presne skontrolujte nezarovnané prvky.

Učte sa z existujúcich návrhov

Študujte štýly svojich obľúbených webových stránok.

Rýchle experimenty s dizajnom

Otestujte zmeny skôr, ako napíšete kód.

Recenzie so zákazníkmi

Ukážte živé zmeny počas stretnutí.

Extrakcia štýlov

Jednoducho získajte kód CSS pre nové prvky.

Ako používať
1

Aktivujte CSS Inspector

Kliknite na ikonu CSS Inspector v paneli nástrojov DevSuite Pro.

2

Kontrola prejdením myšou

Pohybujte kurzorom nad ľubovoľným prvkom a uvidíte jeho vlastnosti.

3

Kliknutím uzamknete

Kliknutím na prvok panel pripnete.

4

Upravte štýly

Dvojitým kliknutím na hodnoty ich upravíte.

5

Skopírujte a použite

Skopírujte aktualizovaný kód a použite ho vo svojom projekte.

Pripravený vyskúšať?

Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.

Pridať do Chrome Pridať do Edge Pridať do FireFox