Инструменты разработчика

В каждый браузер встроены инструменты разработчика (DevTools) — панели, которые показывают, как браузер понял ваш HTML и CSS. В них видно, какие правила применились к элементу, откуда взялся отступ и почему блок не встал на место. Здесь описан Chrome; в Firefox, Edge и Safari всё устроено очень похоже.

Как открыть

Самый быстрый путь — щёлкнуть правой кнопкой по элементу и выбрать «Просмотреть код» (Inspect). DevTools откроются сразу на нём.

Панель Elements

Слева на панели Elements — дерево DOM: страница в том виде, в каком её построил браузер. При наведении на строку элемент подсвечивается на странице. Попробуйте на этом примере: щёлкните правой кнопкой по кнопке и выберите «Просмотреть код»:

<style>
  .btn { padding: 10px 20px; border: none; border-radius: 8px; background: steelblue; color: white; }
</style>
 
<button class="btn">Исследуй меня</button>

Пример живёт в отдельном окошке — фрейме, поэтому в дереве вы окажетесь внутри его документа.

Стили элемента

Справа, во вкладке Styles, перечислены все правила, которые подходят к выбранному элементу, — сверху самые сильные. Правило, которое проиграло каскаду, показано зачёркнутым. Выберите абзац в примере:

<style>
  p { color: steelblue; }
  .note { color: crimson; }
</style>
 
<p class="note">Какой цвет победил?</p>

В Styles будет видно, что color: steelblue зачёркнут — его перебило правило .note. Значения можно менять прямо там: щёлкните по цвету и впишите другой, а флажок слева от свойства временно его выключает.

Блочная модель и Computed

Во вкладке Computed внизу нарисована схема блочной модели элемента: содержимое, padding, border и margin с точными размерами. Ниже — итоговые значения всех свойств после каскада. Если непонятно, откуда взялся отступ, ищите его здесь: щелчок по свойству ведёт к правилу, которое его задало.

Подсказки flex и grid

Рядом с flex- и grid-контейнерами в дереве DOM стоит значок flex или grid. Щелчок по нему рисует поверх страницы линии сетки, номера линий и промежутки:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .grid div { padding: 12px; background: lavender; }
</style>
 
<div class="grid">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Найдите этот блок в Elements и включите подсветку сетки — станет видно, где проходят линии 1–4.

Режим устройства

Кнопка с телефоном и планшетом на панели DevTools (или Ctrl+Shift+M) включает режим устройства: страница показывается в окне заданной ширины, например 375 пикселей, как у телефона. Так проверяют медиазапросы, не сжимая окно браузера. Во вкладке Rendering там же можно эмулировать тёмную тему системы.

Частая ошибка

Всё, что вы поменяли в DevTools, живёт только до перезагрузки страницы. Подобрали удачный отступ, обновили страницу — и он пропал, потому что файл на диске не изменился. Найденные в DevTools значения сразу переносите в свой файл CSS. Подсказка: в Styles справа от каждого правила указаны файл и строка, где оно записано.