← 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: 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
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ť? CSS Inšpektor?

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

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