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

Как открыть

Инструменты разработчика (DevTools) встроены во все настольные браузеры. Открыть их можно так:

• клавиша F12 или Ctrl + Shift + I в Windows и Linux;
• Cmd + Option + I в macOS;
• правый клик по элементу страницы → «Просмотреть код» (в Chrome и Яндекс Браузере) или «Исследовать» (в Firefox).

В Safari меню разработчика сначала нужно включить в настройках: «Дополнения» → «Показывать функции для веб-разработчиков».

Ниже — названия панелей в Chrome. В Firefox и Safari они называются похоже и работают так же.

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

Панель Elements показывает DOM — дерево элементов страницы. Чтобы найти нужный элемент, нажмите кнопку со стрелкой в левом верхнем углу инструментов (или Ctrl + Shift + C) и кликните по нему на странице. Элемент подсветится, а в дереве откроется его разметка.

Правила элемента

Справа от дерева — панель Styles. В ней все правила, которые подходят выбранному элементу, от самого сильного к самому слабому. У каждого правила указан файл и строка, где оно написано.

• Зачёркнутое объявление проиграло: его перебило более сильное правило выше.
• Объявление с жёлтым треугольником браузер не понял — опечатка в свойстве или значении.
• Раздел Inherited from … — свойства, унаследованные от предков.
• Правила с пометкой user agent stylesheet — стили самого браузера.

Здесь же можно экспериментировать: кликните по значению и поменяйте его, снимите флажок, чтобы отключить объявление, или кликните по пустому месту в правиле, чтобы добавить новое. Страница обновится сразу.

Итоговые значения

Панель Computed показывает вычисленное значение каждого свойства. Раскройте свойство — и увидите, какое правило его задало. Это самый быстрый ответ на вопрос «почему этот текст серый?».

Там же нарисована блочная модель элемента: содержимое, внутренние отступы, рамка и внешние отступы с точными размерами в пикселях.

Правки не сохраняются

Всё, что вы меняете в инструментах, живёт до перезагрузки страницы. Это удобный черновик: подберите значения, а потом перенесите их в свой CSS-файл.