← Назад к функциям
Free

CSS Инспектор

CSS Inspector — это мощный инструмент разработчика, который позволяет просматривать все CSS-свойства любого элемента, просто наведя на него курсор. Нажмите, чтобы зафиксировать стили, отредактируйте их напрямую и увидите изменения, мгновенно примененные на странице.

Независимо от того, исправляете ли вы проблемы с макетом или изучаете понравившийся сайт, 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
Ключевые особенности

Просмотр свойств в реальном времени

Мгновенно просматривайте шрифты, размеры, цвета, отступы и многое другое при наведении на любой элемент.

Нажмите для фиксации

Нажмите на элемент, чтобы заблокировать панель, чтобы она не исчезала, что позволит провести детальный осмотр.

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

Дважды щелкните по значениям, чтобы изменить их напрямую. Ваши правки мгновенно отражаются на странице.

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

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

Визуализация блочной модели

Визуально просматривайте значения полей (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