Elements Tab

Инспекция и редактирование HTML-структуры и CSS-стилей в реальном времени

Зачем нужно

  • Понять как устроена вёрстка любого сайта
  • Быстро экспериментировать с CSS без перезагрузки
  • Отлаживать проблемы с расположением элементов
  • Учиться на чужих сайтах

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

  • Отладка HTML/CSS
  • Изучение вёрстки сайтов
  • Быстрое прототипирование стилей
  • Поиск проблем с responsive-дизайном

Предпосылки

Инспекция HTML

Выбор элемента

  1. Ctrl+Shift+C — режим инспекции → клик на элемент
  2. Правый клик на элемент → "Просмотреть код"
  3. В панели Elements — навигация стрелками

HTML-дерево

▼ <html>
  ▼ <head>
      <meta charset="UTF-8">
      <title>My Page</title>
  ▼ <body>
    ▼ <header class="main-header">
      ▼ <nav>
          <a href="/">Home</a>

Редактирование HTML

  • Двойной клик на тег, атрибут или текст → редактирование
  • Right-click → Edit as HTML → редактировать весь блок
  • Delete — удалить элемент
  • Ctrl+Z — отмена
  • Перетаскивание — переместить элемент в дереве

Поиск в DOM

Ctrl+F в панели Elements:

  • По тексту: header
  • По CSS-селектору: .nav-link
  • По XPath: //div[@class="container"]

Работа со стилями

Панель Styles

Правая панель показывает все CSS-правила, применённые к выбранному элементу:

/* element.style — инлайн стили */
element.style {
  color: red;
}

/* style.css:15 — из файла */
.header {
  background: #333;
  padding: 20px;
}

/* user agent stylesheet — стили браузера */
body {
  margin: 8px;
}

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

  • Клик на значение — редактирование
  • Клик на пустое место — добавить свойство
  • Checkbox — включить/выключить свойство
  • Клик на цвет — color picker
  • Стрелки вверх/вниз — изменить числовое значение на 1
  • Shift + стрелки — на 10
  • Alt + стрелки — на 0.1

Добавление CSS-правил

  • Кнопка + в Styles → новое правило для элемента
  • element.style — добавить инлайн-стиль

Box Model

Визуальное представление margin, border, padding, content:

┌─────── margin ────────┐
│ ┌──── border ───────┐ │
│ │ ┌── padding ────┐ │ │
│ │ │               │ │ │
│ │ │   content     │ │ │
│ │ │   300 × 200   │ │ │
│ │ │               │ │ │
│ │ └───────────────┘ │ │
│ └───────────────────┘ │
└───────────────────────┘
  • Наведение на число → подсветка на странице
  • Двойной клик на число → редактирование
  • Показывает итоговые размеры элемента

Computed Styles

Панель Computed — финальные вычисленные значения ВСЕХ CSS-свойств:

display:     flex
width:       300px
height:      auto → 245px
font-size:   16px (inherited from body)
color:       rgb(51, 51, 51)

Полезно когда:

  • Не понимаете откуда берётся значение
  • Нужно увидеть наследуемые свойства
  • Хотите проверить итоговый размер

Event Listeners

Панель Event Listeners — все обработчики событий на элементе:

click
  ▼ button.submit()-btn
      handler: (e) => { ... }
      source: app.js:42
      ☑ passive
  • Клик на app.js:42 → переход в Sources к коду обработчика
  • Checkbox "Ancestors" — показать обработчики родителей

Полезные функции

Force State (псевдоклассы)

Right-click на элемент → Force state:

  • :hover — стили при наведении
  • :active — стили при нажатии
  • :focus — стили при фокусе
  • :visited — стили посещённой ссылки

DOM Breakpoints

Right-click → Break on:

  • Subtree modifications — изменение дочерних элементов
  • Attribute modifications — изменение атрибутов
  • Node removal — удаление элемента

Copy

Right-click:

  • Copy → Copy selector — CSS-селектор элемента
  • Copy → Copy XPath — XPath элемента
  • Copy → Copy outerHTML — весь HTML элемента
  • Copy → Copy styles — все стили элемента

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

  • Забывать что изменения временные — при перезагрузке всё вернётся
  • Не использовать Computed — искать стиль в цепочке наследования вместо Computed
  • Не использовать Force State — вручную наводить мышь, чтобы увидеть :hover
  • Не искать через Ctrl+F — листать огромное DOM-дерево вручную

Практика

  1. Откройте любой сайт и инспектируйте заголовок через Ctrl+Shift+C
  2. Измените цвет фона элемента в Styles
  3. Посмотрите Box Model — измените padding
  4. Найдите элемент через Ctrl+F в Elements по CSS-селектору
  5. Включите :hover через Force State и изучите hover-стили
  6. Скопируйте CSS-селектор элемента через Right-click → Copy

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

Ресурсы