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

CSS Інспектор

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

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

Live-перегляд
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
Основні функції

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

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

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

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

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

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

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

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

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

Переглядайте значення відступів (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

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

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

Готові спробувати? CSS Інспектор?

Встановіть DevSuite Pro безкоштовно та отримайте понад 39 інструментів розробника для вашого браузера.

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