Работа с инструментами разработчика в Chrome

Инструменты разработчика (Dev Tools, Console) в Chrome открываются либо по нажатию F12 либо по Ctrl+Shift+i либо кликнуть правой кнопкой мыши и выбрать "просмотреть код" .

Чтобы узнать, что происходит с проблемным блоком, нужно его выделить либо кликнув на код либо нажав на самую левую кнопку на панели инструментов и затем кликнуть на блок на сайте.

Затем посмотреть какие стили применяются к блоку. Для этого потребуются вкладки Style и Computed. Вкладка Computed также покажет настоящие размеры блока, его внешние и внутренние отступы и положение.

Удобно:

Чтобы увеличивать или уменьшать числовые значения, можно кликнуть на значение мышкой и потом использовать стрелки клавиатуры. Иногда это помогает попасть в PixelPerfect или подобрать правильные значения.

Если кликнуть на квадратик у цветовых значений, откроется окно цветовая палитра с пипеткой.

Как проверить адаптивность сайта

На панели инструментов разработчика нужно выбрать вторую слева кнопочку (Toggle Device Toolbar) или нажать Ctrl+Shift+M. Откроется окно в котором можно изменять ширину вьюпорта, масштаб, плотность пикселей, выбрать мобильное устройство или десктоп, поворот экрана. Если вы не видите возможности выбора какой-то из характеристик, то настройте панель, нажав на 3 точки справа.