# Инструкция по работе с DevTools на примере Chrome

Отладка кода — важный для разработчика навык. Среди разработчиков есть шутка, что если ваш код заработал как нужно с первого раза, то это магия и не бывает такого. Эта шутка иллюстрирует реалии. Любой написанный код приходится многократно проверять и исправлять пока он не заработает как нужно.

В современные браузеры встроены удобные инструменты, призваные облегчить отладку кода.

Сегодня мы рассмотрим Инструменты разработчика на примере отладки вёрстки.
Мы будем работать в браузере Google Chrome, но в остальных современных браузерах набор инструментов аналогичный.

## Как открыть инструменты разработчика

Чтобы открыть инструменты разработчика вы можете кликнуть правой клавишей в любом месте веб-страницы и из выпадающего меню выбрать пункт «Просмотреть код».

Можно открыть панель инструментов при помощи комбинации клавиш: Ctrl + Shift + I (Windows) или Ctrl + Option + I (Mac).

- [ ] Примечание: при записи видео включить отображение нажатий клавиш на экране и открыть девтулзы обеими способами.

## Вкладка Elements
При открытии инструментов разработчика вы увидите множество разных вкладок и окон. Не пугайтесь, пользоваться мы будем только несколькими из них.

Посмотрим внимательно на первую из них: Elements. Здесь находится вся необходимая верстальщику информация.

### HTML-разметка: передвижение
В большом окне мы видим HTML-разметку сайта или файла, который открыт в брузере.
В этой вкладке можно перемещаться по элементам при помощи клавиш стрелок вверх / вниз или кликая мышкой на нужный элемент.
При наведении мышки на элемент или при выделении его при помощи клавиатуры он будет подсвечен на странице.

Если внутри элемента есть вложенные элементы, то вы увидите рядом со строкой небольшой треугольник. Находясь на таком элементе можно нажать стрелку вправо или нажать на этот небольшой треугольник мышкой и элемент раскроется, показывая всех вложенных детей.

### HTML-разметка: редактирование
Любой элемент, который мы видим в этом окне, можно изменить. Дважды кликните мышкой на текст заголовка или нажмите правой клавишей мыши на тег и выберите «Edit as HTML». После этого тег станет редактируемым и вы сможете изменить текст.

После окончания редактирования нажмите Enter или кликните на любой другой элемент. Видите, текст заголовка изменился? Но погодите, мы только что изменили текст на сайте? Такое возможно?

Не беспокойтесь. Все изменения, которые мы вносим в инструментах разработчика, живут только в нашем окне браузера и пропадут после обновления страницы.

Помимо текста вы можете отредактировать и атрибуты тега: кликните дважды на атрибут или клик правой клавишей и так же «Edit as HTML». Это бывает удобно, если нужно добавить / удалить какой-нибудь класс или изменить значение любого существующего атрибута. Можно и добавить атрибут, которого небыло.

В режиме «Edit as HTML» можно добавлять / менять не только текст, но и добавлять / удалять теги целиком.

### Поиск нужного элемента
Не всегда удобно открыть всю разметку и переключаться по элементам в поисках нужного блока. Можно сделать проще: кликните на нужный элемент правой кнопкой мыши и выберите «Просмотреть кода» — вкладка Elements откроется на нужном элементе.

Или можно в левом верхнем углу инструментов разработчика нажать на иконку квадрата со стрелкой и выбрать на странице нужный элемент — курсор в разметке будет установлен на нужном теге.

## Вкладка Styles

Верстальщику важна не только разметка, но и стили страницы. Для CSS есть отдельная вкладка Styles.

Здесь вы видите все стили, применяемые к элементу, на котором сейчас установлен курсор в HTML-разметке. Стили идут от применяемых к неприменяемым. Тоесть тут перевёрнутый каскад.

Перечёркнутые стили — те, что переопределены следующими стилями. Если рядом со свойством стоит жёлтый треугольник, то в имени свойства или в его значении допущена ошибка.

Тут же, во вкладке Styles, мы можем написать новые свойства или даже ценый блок кода. Нажмите на + и будет создан новый блок с текущим селектором. К нему можно дописать, например, псевдоэлемент или дополнительный класс и ниже написать стили.

Также можно написать стили для этого конкретного элемента. Нажмите в самом верху и запишите нужные свойства. Они будут заинлайнены — написаны прямо внутри тега — и будут влиять только на этот отдельный элемент.

## Вкладка Computed

Ещё одна важная вкладка, нужная верстальщику — Computed. Здесь отображаются вычесленные стили. Это актуально, если вы указываете значения в относительных единицах. Например, можно посмотреть чему будет равен один `em` для выбранного элемента.

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

## Просмотр файла стилей

Вернёмся во вкладку Styles и нажмём на название файла стилей, в котором указано конкретное свойство. Откроется файл, в котором это свойство прописано. Если вы видите длинную строку с CSS, то это значит, что файл минимизирован. Внешний вид легко исправить, нажав на фигурные скобки в нижней части открывшегося окна.

## Настройка инструментов разработчика

Мы сегодня рассмотрели только самые основные возможности инструментов разработчика. На самом деле функцинал так называемых DevTools гораздо шире.
Вы можете самостоятельно настроить необходимые вкладки в момент, когда они вам понадобятся. Нажмите на три точки и выберите пункт More tools. В открывшемся меню вы можете выбрать нужную для вас вкладку.

Кроме того вы можете менять положение инструментов разработчика в окне браузера. Нажмите на всё те же три точки и нажмите на одну из трёх иконок: снизу, сбоку или в отдельном окне.