Инструменты разработчика встроены в каждый современный браузер и открываются обычно клавишей F12 или через правый клик по элементу страницы с пунктом "просмотреть код". Для вёрстки это, пожалуй, самый используемый инструмент вообще, куда более важный, чем любой отдельный редактор или плагин.
Вкладка элементов показывает живую структуру страницы и позволяет прямо в браузере менять HTML и CSS, тут же видя результат. Изменения не сохраняются в файл на диске, зато можно быстро проверить гипотезу — например, увеличить отступ на глаз и понять подходящее значение, прежде чем переносить его в реальный файл стилей.
Панель стилей рядом с деревом элементов показывает все CSS-правила, которые применяются к выбранному элементу, с указанием, откуда каждое из них взято. Перечёркнутые свойства означают, что они переопределены более специфичным или более поздним правилом — это один из лучших способов разобраться, откуда взялось неожиданное значение.
Вкладка сети показывает все запросы, которые страница делает при загрузке — файлы стилей, скриптов, изображения, шрифты — вместе с их размером и временем загрузки. Это удобно, чтобы понять, что именно замедляет загрузку страницы, и не подгружается ли, например, изображение в разрешении куда большем, чем нужно на экране.
Режим эмуляции устройств переключает отображение страницы под разные размеры экранов, включая популярные модели телефонов и планшетов, и позволяет проверить адаптивную вёрстку, не имея под рукой десятка реальных устройств.
Вкладка консоли пригождается в основном для отладки JavaScript, но и для вёрстки полезна — многие ошибки, связанные с недогруженными шрифтами или изображениями, тоже отображаются именно там, с пояснением, что конкретно пошло не так.
Подробное руководство по всем панелям инструментов разработчика в Chrome можно найти в официальной документации Chrome DevTools.
