Добавяне към Chrome
← Назад към функциите
Free

CSS Inspector

Инструментът CSS Inspector е мощен инструмент за разработчици, който ви позволява да виждате всички CSS свойства на всеки елемент, само като задържите курсора на мишката върху него. Кликнете, за да заключите стиловете, редактирайте ги директно и вижте как промените се прилагат незабавно към страницата.

Добавяне към Chrome Добави към Edge Добавяне към FireFox

Независимо дали отстранявате проблеми с оформлението или изучавате уебсайт, който харесвате, CSS Inspector предоставя всичко необходимо в чист плаващ панел. Инспектирайте лесно, без да отваряте DevTools на браузъра.

Преглед на живо
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
Ключови функции

Показване на свойства в реално време

Вижте шрифтове, размери, цветове, разстояния и други незабавно, когато задържите курсора на мишката върху всеки елемент.

Кликнете за заключване

Кликнете върху елемента, за да заключите панела от изчезване, което позволява подробна инспекция.

Редактиране на стил на живо

Кликнете два пъти върху стойностите, за да ги промените директно. Вашите редакции ще се отразят незабавно на страницата.

Копиране с едно кликване

Копирайте отделни свойства или целия блок със стилове в клипборда си с едно кликване.

Визуализация на Box Model

Вижте стойностите за margin, border и padding визуално.

Размер и позиция на елемента

Показва ширината, височината и позицията на елемента на страницата.

Какво можете да инспектирате

CSS Inspector показва над 40 свойства:

Типография

  • 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

Оформление

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

Фон

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

Ефекти

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Чести случаи на употреба

Отстраняване на проблеми с оформлението

Инспектирайте неправилно подравнени елементи с прецизност.

Учете се от съществуващи дизайни

Изучавайте стиловете на любимите си уебсайтове.

Бързи дизайнерски експерименти

Тествайте промените, преди да пишете код.

Прегледи от клиенти

Показвате промени на живо по време на срещи.

Извличане на стил

Лесно вземете CSS кода за нови елементи.

Как да използвате
1

Активирайте CSS Inspector

Кликнете върху иконата CSS Inspector в лентата с инструменти на DevSuite Pro.

2

Задръжте за инспектиране

Преместете курсора върху всеки елемент, за да видите свойствата му.

3

Кликнете за заключване

Кликнете върху елемента, за да закрепите информационния панел.

4

Редактирайте стилове

Кликнете два пъти върху стойностите, за да ги коригирате.

5

Копирайте и използвайте

Копирайте актуализирания код и го използвайте във вашия проект.

Готови ли сте да опитате? CSS Inspector?

Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.

Добавяне към Chrome Добави към Edge Добавяне към FireFox