Adaugă în Chrome
← Înapoi la Funcționalități
Free

Ispettore CSS

CSS Inspector este un instrument puternic pentru dezvoltatori care vă permite să vizualizați toate proprietățile CSS ale oricărui element pur și simplu trecând cu mouse-ul peste acesta. Faceți clic pentru a fixa stilurile, editați-le direct și vedeți cum modificările sunt aplicate instantaneu pe pagină.

Adaugă în Chrome Adaugă la Edge Adaugă în FireFox

Indiferent dacă remediați probleme de aspect sau studiați un site web care vă place, CSS Inspector vă oferă tot ce aveți nevoie într-un panou plutitor curat. Inspectați ușor fără a deschide DevTools din browser.

Previzualizare în Direct
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
Caracteristici Principale

Vizualizare Proprietăți în Timp Real

Vedeți fonturile, dimensiunile, culorile, spațierea și multe altele instantaneu când treceți cu mouse-ul peste orice element.

Clic pentru a Fixa

Faceți clic pe element pentru a bloca panoul astfel încât să nu dispară, permițând o inspecție detaliată.

Editare Stil Live

Faceți dublu clic pe valori pentru a le schimba direct. Editările dvs. se reflectă instantaneu pe pagină.

Copiere cu un Singur Clic

Copiați proprietăți individuale sau întregul bloc de stil de design în clipboard cu un singur clic.

Vizualizare Box Model

Vedeți vizual valorile pentru margini, borduri și padding.

Mărime și Poziție Element

Afișează lățimea, înălțimea și poziția elementului pe pagină.

Ce Poți Inspecta

CSS Inspector arată peste 40 de proprietăți:

Tipografie

  • 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

Layout

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

Fundal

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

Efecte

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Cazuri de Utilizare Comune

Depanarea Problemelor de Layout

Inspectați elementele nealiniate cu precizie.

Învățați din Designuri Existente

Studiați stilurile site-urilor web preferate.

Experimente Rapide de Design

Testați modificările înainte de a scrie cod.

Recenzii Clienți

Arătați modificările live în timpul întâlnirilor.

Extracție Stil

Obțineți ușor codul CSS pentru elemente noi.

Cum se Folosește
1

Activați CSS Inspector

Faceți clic pe pictograma CSS Inspector din bara de instrumente DevSuite Pro.

2

Treceți mouse-ul pentru a inspecta

Mutați cursorul peste orice element pentru a vedea proprietățile.

3

Clic pentru a fixa

Faceți clic pe element pentru a fixa panoul.

4

Editați Stilurile

Faceți dublu clic pe valori pentru a le ajusta.

5

Copiați și Utilizați

Copiați codul actualizat și utilizați-l în proiectul dvs.

Ești Gata să Încerci? Ispettore CSS?

Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.

Adaugă în Chrome Adaugă la Edge Adaugă în FireFox