DevTools браузера для HTML и CSS

DevTools — встроенный инструмент разработчика в любом современном браузере. Он позволяет видеть структуру страницы, менять HTML и CSS прямо в браузере и мгновенно наблюдать результат. Это незаменимый инструмент при вёрстке.

Как открыть DevTools

Все примеры в статье показаны для Chrome/Chromium. В Firefox и Safari интерфейс очень похож.

Вкладка Elements

Здесь отображается живое дерево DOM страницы — именно то, что браузер построил из HTML, уже с примёнными скриптами и шаблонами.

Что можно делать:

• Раскрывать и сворачивать узлы дерева.
• Двойной клик на тексте или атрибуте — редактировать прямо здесь.
• Правый клик → «Edit as HTML» — изменить блок кода целиком.
• Перетаскивать элементы внутри дерева.
• Delete — удалить элемент временно (до перезагрузки страницы).

Как найти нужный элемент:

1. Нажмите иконку курсора (или Ctrl+Shift+C).
2. Наведите на любой элемент на странице.
3. Кликните — DevTools выделит этот элемент в дереве.

Вкладка Styles

После выбора элемента в Elements справа (или снизу) появляется панель Styles. Она показывает все CSS-правила, применённые к элементу, в порядке убывания приоритета.

element.style {}          ← инлайн-стили

.post-card { ... }        ← классы элемента
  color: #1a1a1a;
  font-size: 1rem;

h2 { ... }                ← теговые правила
  font-weight: bold;

*, ::before, ::after {}   ← универсальный селектор
  box-sizing: border-box;

user agent stylesheet     ← стили браузера по умолчанию
  display: block;

Зачёркнутые свойства — переопределены правилом с более высоким приоритетом.

Что можно делать:

• Кликнуть на значение цвета, размера — изменить с клавиатуры или колёсиком мыши.
• Кликнуть на чекбокс слева от свойства — включить/выключить его.
• Нажать в конце правила и напечатать новое CSS-свойство.
• Нажать + на панели — добавить новое правило для выбранного селектора.

Все изменения временны. При перезагрузке страницы они пропадут. Работающие правила переносите в ваш CSS-файл.

Box Model

В нижней части панели Styles (или в отдельной вкладке Computed) есть визуальная схема блочной модели:

┌─────────────────────────────┐
│           margin            │
│  ┌───────────────────────┐  │
│  │        border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  │ 320 × 48  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

Нажмите на любое значение в схеме — оно станет редактируемым. Так удобно отлаживать отступы.

Вкладка Console

Здесь появляются ошибки JavaScript и сетевые проблемы. Для HTML/CSS полезны предупреждения о недопустимых атрибутах или ненайденных ресурсах (картинки, CSS-файлы):

Failed to load resource: the server responded with a status of 404
GET http://localhost:8000/static/css/styles.css

Это значит, что файл стилей не подключён или путь к нему указан неверно.

Вкладка Network

Показывает все загружаемые ресурсы. Чтобы проверить, загрузился ли CSS-файл:

1. Перезагрузите страницу с открытым DevTools.
2. Зайдите в Network → выберите фильтр CSS.
3. Убедитесь, что файл отдаётся со статусом 200.

Практические советы

Отладка «почему отступ такой большой»

Выделите элемент → посмотрите Box Model → разверните родителей до тех пор, пока не найдёте, откуда берётся лишний margin или padding.

Найти унаследованный цвет

В панели Styles прокрутите вниз до раздела Inherited from ... — там видны свойства, пришедшие от родительских элементов.

Попробовать шрифт

Выделите текст → в Styles найдите font-family → измените значение прямо там. Так можно быстро сравнить несколько вариантов.

Эмуляция мобильного устройства

Нажмите иконку телефона в DevTools (или Ctrl+Shift+M). Выберите устройство из списка или задайте произвольный размер экрана. DevTools покажет страницу, как на мобильном.

Не бойтесь экспериментировать в DevTools — изменения не затрагивают файлы проекта. Это самое безопасное место для проверки идей по вёрстке.