Как протестировать проект на работоспособность в как можно большем числе устройств? Покупать набор из iPhone, iPad, Google Nexus, Samsung Galaxy и нескольких HTC? Нет — можно обойтись панелью тестирования адаптивности в Google 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, нажав клавишу F12, после этого нужно выбрать иконку мобильного телефона в левом нижнем углу.
Панель разделена на 2 части: выбор устройств для эмуляции и панель эмуляции скорости интернет-канала.
Среди доступных эмулируемых мобильных устройств можно выделить семейство 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”, то лист с эмуляцией будет вмещаться в свободную область экрана, показываясь всегда полностью, без перекрытий.
Здесь расположена панель эмуляции скорости интернет-канала. Эта функция может пригодится, если нужно проверить ваш проект в условиях медленного доступа к интернету, например, пользователь же может работать через EDGE или 3G мобильный интернет.
Раньше, чтобы получить такой функционал тестирования,приходилось разрабатывать собственные технологии, эмулируя канал “медленного” интернета. Сейчас у каждого пользователя Chrome есть возможность пользоваться готовым.
Итак, тут есть есть 5 эмуляций типов доступа.
Кроме того вы можете комбинировать панель DevTools Network, чтобы определить время загрузки каждого из загружаемых файлов.
На примере известного сайта http://www.awwwards.com/ мы разберем возможности панели адаптивности DevTools. Мы протестируем страницу Awards-of-the-day: http://www.awwwards.com/awards-of-the-day/.
Открыв панель адаптивности через F12 и нажатую иконку смартфона в левом нижнем углу, мы сразу же включаем инспектор медиа-запросов. Я это делая для того, чтобы увидеть схему брейкпоинтов, которые применены на сайте.
Переходим к режиму эмуляции девайсов.
Благодаря усилиям разработчиков DevTools наступает время, когда в условия отсутствия целого парка техники и телефонов, мы можем тестировать и отлаживать наши проекты не в абстрактных сервисах “на глаз”, а руководствуясь реалистичными эмуляциями моделей мобильных устройств и каналов интернет-доступа.