← Zpět k funkcím
Free

CSS Inspector

Nástroj CSS Inspector je výkonný nástroj pro vývojáře, který vám umožní vidět všechny CSS vlastnosti libovolného prvku pouhým najetím myší. Kliknutím styly uzamknete, přímo je upravíte a uvidíte, jak se změny okamžitě projeví na stránce.

Ať už řešíte problémy s rozvržením nebo studujete web, který se vám líbí, CSS Inspector poskytuje vše, co potřebujete, v přehledném plovoucím panelu. Kontrolujte snadno bez otevírání vývojářských nástrojů prohlížeče.

Živý náhled
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
Klíčové funkce

Zobrazení vlastností v reálném čase

Okamžitě uvidíte písma, velikosti, barvy, mezery a další parametry při najetí myší na libovolný prvek.

Kliknutím uzamknete

Kliknutím na prvek uzamknete panel, aby nezmizel, což umožní podrobnou kontrolu.

Živá úprava stylu

Dvakrát klikněte na hodnoty a přímo je změňte. Vaše úpravy se okamžitě projeví na stránce.

Kopírování jedním kliknutím

Jedním kliknutím zkopírujte jednotlivé vlastnosti nebo celý blok stylů do schránky.

Vizualizace Box Modelu

Vizuálně uvidíte hodnoty pro margin, border a padding.

Velikost a pozice prvku

Zobrazuje šířku, výšku a pozici prvku na stránce.

Co můžete kontrolovat

CSS Inspector zobrazuje více než 40 vlastností:

Typografie

  • 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

Rozvržení

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

Pozadí

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

Efekty

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Běžné případy použití

Řešení problémů s rozvržením

Přesně zkontrolujte špatně zarovnané prvky.

Učte se z existujících návrhů

Studujte styly svých oblíbených webových stránek.

Rychlé experimenty s designem

Otestujte změny před psaním kódu.

Klientské recenze

Ukažte změny naživo během schůzek.

Extrakce stylu

Snadno získejte CSS kód pro nové prvky.

Jak používat
1

Aktivujte CSS Inspector

Klikněte na ikonu CSS Inspector na panelu nástrojů DevSuite Pro.

2

Najeďte pro kontrolu

Přesuňte kurzor na libovolný prvek a uvidíte jeho vlastnosti.

3

Kliknutím uzamknete

Kliknutím na prvek připnete informační panel.

4

Upravte styly

Dvakrát klikněte na hodnoty a upravte je.

5

Zkopírujte a použijte

Zkopírujte aktualizovaný kód a použijte jej ve svém projektu.

Jste připraveni to zkusit? CSS Inspector?

Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.

Přidat do Chromu Přidat do Edge Přidat do FireFoxu