Привет! Меня зовут Виталий, я фронтенд-тимлид в KTS. В статье расскажу об инструментах для отладки и ручного тестирования фронтенда на мобильных устройствах. Этот туториал в первую очередь пригодится фронтендерам и ручным тестировщикам.
В статье рассмотрим несколько способов, которые позволяют исследовать работу фронтенда на мобильных устройствах. Расскажу про удобства и ограничения каждого из способов отладки ниже:
В responsive mode браузера на компьютере
С помощью эмуляторов iOS и Android
На физическом iPhone и Android-устройстве через USB
С помощью Browserstack
В процессе отладки часто нужно исследовать взаимодействие фронтенда с сервером. Поэтому в статье расскажу, как можно подменять запросы и ответы с помощью программы Charles Proxy.
В качестве подопытного я буду рассматривать сайт Хабра.
Содержание
Что можно отлаживать и тестировать
Способы исследования — краткое описание
Responsive mode браузера на компьютере
Реальное устройство
Эмуляторы
Browserstack
Способы исследования — как пользоваться
Dev Tools в Chrome
Мобильная версия сайта
Вёрстка
Console
Network
Performance Insights: измеряем производительность
Dev Tools в Safari
Эмулятор iPhone
Установка
Отладка в эмуляторе iPhone
Эмулятор Android
Установка
Отладка в эмуляторе Android
Отладка iPhone по USB
Отладка Android по USB
Как перехватывать запросы с Charles Proxy
Перехват запросов на iOS-эмуляторе
Почему мы видим HTTPS-кракозябры
Настраиваем промежуточный сертификат безопасности SSL в Charles Proxy
Подмена запросов
Пример — подменяем название компании в блоге
Пример — подменяем количество запрашиваемых статей в запросе
Пример — подменяем статью по открытой ссылке
Что ещё
Cохраняйте историю из Network в файлы
Мне бы перехватывать запросы, но попроще
Почему нельзя открыть DevTools прямо на телефоне?
Заключение
Что можно отлаживать и тестировать
Каждый из способов позволяет получить полноценный доступ к браузерным инструментам разработчика DevTools. Вот некоторые из них:
Вкладка Elements позволяет исследовать вёрстку и DOM-дерево элементов на странице
Вкладка Console выводит ошибки и логи JavaScript
Вкладка Network позволяет исследовать взаимодействие с страницы сервером
debugger позволит выполнить пошаговую отладку
Вкладки Performance и Performance Insights предоставляют инструментарий для исследования производительности страницы
Предположим, что мы открыли страницу со списком постов на Хабре: видим, что сначала едет верстка, а затем вовсе появляется белый экран. При этом, во-первых, такое поведение происходит только если мы открываем страницу на iPhone, а с Android-устройствами и на компьютере проблем нет. Во-вторых, это поведение воспроизводится лишь на отдельных страницах.
Случай выдуманный. Желаю Хабру, чтобы его пользователи никогда не видели белый экран
Интересные статьи
Интересные статьи
