DevTools. Дебаггинг адаптивности

Каждый фронтендер хочет быть уверенным, что его проект отлично отображается в большинстве устройств. На рынке каждый месяц появляются новые смартфоны от HTC, Apple выпустили iPhone 6 и iPhone 6+, а Google соблазняет пользователей своим Nexus. Все это привело к тому, что старое понятие верстальщиков “мобильный будет от 320 до 768 пикселей” уже перестало всех устраивать. Нужны новые стандарты разработки, кроме известных трех брейкпоинтов.

Последний проект, который мной был сделан, содержал уже не 3 брейкпоинта, а 5. Это связано с тем, что iPad и планшеты Samsung зарятся на десктопный брейкпоинт, а если еще брать во внимание разброс в разрешении обычного 15” ноутбука с 1360 пикселями ширины и 22” десктопа в 1600 пикс. шириной, то появляются моменты, где внешний вид верстки не соответствует макету. Слайдер будет отлично выглядеть на десктопе в 1600 пикселей, но вот когда мы смотрим верстку на ноутбуке — заголовки и текст в слайдере просто не влезают. Эти проблемы особенно выражены, когда секция в дизайне должна быть fit-to-viewport, то есть полностью помещаться в экран пользователя, однако при полноценном тестировании в DevTools начинаются проблемы.

Панель адаптивности DevTools

Давайте поближе рассмотрим панель адаптивности DevTools.

Чтобы запустить режим отладки, нужно вызвать DevTools, нажав клавишу F12, после этого нужно выбрать иконку мобильного телефона в левом нижнем углу.

Панель разделена на 2 части: выбор устройств для эмуляции и панель эмуляции скорости интернет-канала.

Панель эмуляции устройств (Device Mode Mobile Emulation)

Среди доступных эмулируемых мобильных устройств можно выделить семейство iPhone от 3 и вплоть до 6 Plus версии c device-pixel-ratio в 3 единицы, Google Nexus и Samsung Galaxy. Среди планшетов здесь вы найдете iPad 3 и 4, Samsung Galaxy Tab и Amazon Kindle Fire HDX 7.
Сразу отмечаем — эмуляция поведения GPU и CPU каждого из этих устройств не предусмотрена. Кроме того, в этом режиме все псевдоклассы :hover в ваших стилях будут заблокированы, будут работать только тач события.

Прокачай свой скилл — инспектор медиа-запросов.

Чтобы попасть в меню инспектора медиа-запросов, нужно нажать на эту кнопку. Синим цветом выделяются запросы, которые касаются свойства max-width, желтым цветом выделены запросы с min-width, а зеленым выделены запросы, касающиеся величин в пределах определенных значений слева и справа. Инспектор медиа-запросов очень удобен, вы можете наглядно увидеть предусмотренные разработчиком брейкпоинты.

Если нажать на линию меда-запроса правой кнопкой мышки — то можно найти нужную строчку начала медиа-запроса в исходном коде. Если нажать на чекбокс “Zoom to fit”, то лист с эмуляцией будет вмещаться в свободную область экрана, показываясь всегда полностью, без перекрытий.

Network

Здесь расположена панель эмуляции скорости интернет-канала. Эта функция может пригодится, если нужно проверить ваш проект в условиях медленного доступа к интернету, например, пользователь же может работать через EDGE или 3G мобильный интернет.

Раньше, чтобы получить такой функционал тестирования,приходилось разрабатывать собственные технологии, эмулируя канал “медленного” интернета. Сейчас у каждого пользователя Chrome есть возможность пользоваться готовым.

Итак, тут есть есть 5 эмуляций типов доступа.

• Offline — режим оффлайна, когда вы эмулируете неработающий интернет.
• GPRS — простейший мобильный интернет 50 Кб/с и 500 мс Round Trip Time. Технология уже морально устарела.
• EDGE — мобильный интернет 2G стандарта со скоростью доступа в 250 Кб/с и 300 мс Round Trip Time. Классический мобильный интернет в Украине.
• 3G — высокоскоростной мобильный доступ в интернет со скоростью 750 Кб/с и 100 мс Round Trip Time. В Украине только объявлен тендер на 3G связь, однако на западе и в Европе 3G мобильный интернет распространен достаточно широко.
• DSL — семейство технологий для абонентских линий местной телефонии со скоростью в 2 Мб/с и 5 мс Round Trip Time. Эдакий интернет 2000-х.
• WiFi — беспроводной доступ со скоростью в 30 Мб/с и 2 мс Round Trip Time. Классика WiFi интернета.

Кроме того вы можете комбинировать панель DevTools Network, чтобы определить время загрузки каждого из загружаемых файлов.

Практический кейс

На примере известного сайта http://www.awwwards.com/ мы разберем возможности панели адаптивности DevTools. Мы протестируем страницу Awards-of-the-day: http://www.awwwards.com/awards-of-the-day/.

Открыв панель адаптивности через F12 и нажатую иконку смартфона в левом нижнем углу, мы сразу же включаем инспектор медиа-запросов. Я это делая для того, чтобы увидеть схему брейкпоинтов, которые применены на сайте.

1. Первый брейкпоинт равен 480 пикселям. Содержимое строится в 1 колонку с изображениями на всю ширину.
2. Следующий брейкпоинт равен 614 пикселям. Содержимое перестраивается в 2 колонки, и я могу ответить вам зачем — по сути это брейкпоинт ландскейпного режима мобильных телефонов, и 2 колонки вместо 1 колонки позволят сэкономить на загрузке больших изображений, загружая те же изображения, что и в первом брейкпоинте.
3. Третий брейкпоинт — это классический планшетный медиа-запрос с 768 пикселями ширины. Здесь 2 колонки содержимого, но уже большие картинки в 700х500 пикселей исходника.
4. Десктопный брейкпоинт начинается от 1024 пикселей. Здесь раскрывается десктопное главное меню, сменяя мобильное, а количество колонок по прежнему в 2 ряда.
5. Последний брейкпоинт страницы заканчивается значением в 1570 пикселей.

Переходим к режиму эмуляции девайсов.

• Apple iPhone 5. Здесь 1 колонка, выпадающее мобильное меню. В ландскейпном режиме появляются 2 колонки для удобства просмотра и экономии загрузки больших изображений.
• Google Nexus 5 идентичен Apple iPhone 5 по внешнему вижу содержимого.
• Apple iPad 3 и 4 портретный режим. Мобильное компактное меню и 2 колонки.
• Apple iPad 3 и 4 ландскейпный режим. Тут ситуация достаточно интересна: мы видим 2 колонки и полноценное десктопное меню, что, в принципе, удобное решение, т.к. делать мобильное главное меню в брейкпоинте в 1024 пикселя — не вариант.
• Десктоп — 2 колонки и десктопное меню.

Заключение

Благодаря усилиям разработчиков DevTools наступает время, когда в условия отсутствия целого парка техники и телефонов, мы можем тестировать и отлаживать наши проекты не в абстрактных сервисах “на глаз”, а руководствуясь реалистичными эмуляциями моделей мобильных устройств и каналов интернет-доступа.

Все статьи серии Дебаггинг в Google DevTools.

Дебаггинг в Google DevTools. Часть 1: Введение