DevTools -- инспекция элементов

Инспекция элементов — способ выбрать конкретный DOM-элемент на странице и сразу перейти к нему в панели Elements для изучения HTML и CSS.

Зачем нужно

Найти нужный элемент в большом DOM-дереве вручную крайне неудобно. Инспекция позволяет кликнуть на любой элемент на странице — и DevTools мгновенно выделит его в дереве и покажет все применённые стили. Это базовый навык любого фронтенд-разработчика.

Где используется

  • Быстрый доступ к CSS любого элемента страницы
  • Изучение чужих сайтов: как реализована вёрстка
  • Отладка позиционирования и margins/paddings
  • Нахождение класса или id элемента для написания CSS/JS

Основной контент

Способы инспекции

Способ 1: Правый клик Правый клик на элементе страницы → Inspect (или «Просмотреть код»). DevTools откроется с выделенным элементом в панели Elements.

Способ 2: Инструмент выбора (пипетка) В тулбаре DevTools — иконка курсора со стрелкой (левый верхний угол), или Ctrl+Shift+C. Курсор становится инспектором: при наведении на элемент — подсвечивается его box model (content, padding, border, margin). Клик — фиксирует выбор.

Способ 3: Из консоли

// Выбрать элемент программно
inspect(document.querySelector('.my-class'))
// или
$0  // последний выбранный в Elements элемент

Что показывает инспектор при наведении

┌─────────────────────────────────┐
│  div.card                       │  ← тег и класс
│  200 × 120                      │  ← размеры
│  margin: 16px                   │
│  padding: 12px                  │
│  #3b82f6 ─── color              │  ← цвет текста
└─────────────────────────────────┘

Навигация по DOM в Elements

После выбора элемента в Elements:

  • ↑ / ↓ — переход между соседними узлами
  • → — раскрыть дочерние элементы
  • Enter — редактировать атрибут
  • Ctrl+F — поиск по DOM

Поиск элемента в DOM

В панели Elements, Ctrl+F → ввести CSS-селектор, XPath или текст. DevTools подсветит все совпадения.

/* Примеры поиска */
.btn-primary
#header
[data-testid="submit"]

Частые ошибки

  • Клик активирует ссылку/кнопку — при инспекции через правый клик — не на саму кнопку, а рядом или на родителя. Лучше использовать инструмент выбора (Ctrl+Shift+C)
  • Выбран не тот элемент — элементы вложены; нужный может быть дочерним. Используй навигацию в DOM-дереве
  • Не видно псевдоэлементов — ::before и ::after видны в Elements как дочерние узлы с :: префиксом

Связанные темы

Ресурсы