+7 (812) 9-515-415

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

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

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

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

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

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

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

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

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

К размышлению
Оглавление