← Назад до функцій
Free

CSS Інспектор

CSS Інспектор — потужний безкоштовний інструмент, що дозволяє навести курсор на будь-який елемент та миттєво побачити його обчислені CSS властивості.

Незалежно від того, чи виправляєте ви помилки в макеті, чи вивчаєте свій улюблений веб-сайт, CSS Inspector надає все необхідне в зручній плаваючій панелі. Легко інспектуйте без відкриття панелі розробника браузера.

Live-перегляд
example.com/landing-page CSS Inspector: УВІМК.
Наведіть на будь-який елемент, щоб перевірити його CSS
Зареєструватися зараз
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS-властивості Заблоковано
<button> .cta-primary
БЛОКОВА МОДЕЛЬ
margin: 0
padding: 12 24
180 × 48
Типографіка
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Макет і відступи
displayinline-flex
padding12px 24px
border-radius8px
Зовнішній вигляд
background#7c3aed
cursorpointer
transitionall 0.2s ease
Копіювати весь CSS Редагувати
Основні функції

Відображення властивостей у реальному часі

Миттєво переглядайте шрифти, розміри, кольори, відступи та багато іншого, просто наводячи курсор на будь-який елемент.

Клацніть, щоб зафіксувати

Клацніть на елемент, щоб зафіксувати панель, що дозволяє провести детальний огляд.

Редагування стилів у реальному часі

Двічі клацніть на значення, щоб змінити їх безпосередньо. Ваші правки миттєво відобразяться на сторінці.

Копіювання в один клік

Копіюйте окремі властивості або весь блок стилів дизайну в буфер обміну одним кліком.

Візуалізація блокової моделі

Переглядайте значення відступів (margin), рамок (border) та внутрішніх відступів (padding) візуально.

Розмір та положення елемента

Відображає ширину, висоту та положення елемента на сторінці.

Що ви можете інспектувати

CSS Inspector показує понад 40 властивостей:

Типографіка

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Блокова модель

  • 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

Скопіюйте та використовуйте

Скопіюйте оновлений код та використовуйте його у своєму проекті.

Готові спробувати?

Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника

Додати в Chrome Додати в Edge Додати в FireFox