Добавить в FacebookДобавить в Google BookmarksДобавить в TwitterДобавить в OdnoklassnikiДобавить в Vkcom

Как эмулировать iPhone для отладки сайта с помощью Google Chrome.

Попал я в ситуацию, когда мой сайт на мобильных устройствах отображался вкось и вкривь. Ситуация неприятная, кто занимается - тот знает. И, естественно, не у каждого под рукой весь набор мобильных и планшетов. В сети интернет есть сайты-эмуляторы устройств, но они не дают возможности отладки. Да и эмулируют паршивенько. Для нормальной отладки нам понадобятся браузер Google Chrome (точнее его отладчик) и расширение User-Agent Switcher for Chrome. Свитчер нужен в случае, если у вас на сайте используются разные шаблоны для компьютеров и мобильных устройств. И, конечно друзья с мобильными девайсами. В первую очередь, звоним им и просим зайти на сайт со своих девайсов. Потом переходим в панель управления хостингом и смотрим логи сервера.

Из логов копируем http-заголовок запроса (в моем случае это Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/25.0.1364.124 Mobile/10B329 Safari/8536.25), отвечающий данному устройству. Переходим в настройки расширения User-Agent Switcher for Chrome и создаем устройство с таким заголовком. И используем отладчик Chrome (там можно выбрать любое необходимое разрешение экрана. Параллельно можно использовать расширение Resolution Test, которое позволит менять разрешение окна браузера на нужное Вам. Но это на любителя.

Потом открываем сайт и переключаемся на созданное устройство, сменив разрешение, на соответствующее проверяемому девайсу.

После переключения, страница сайта будет отображаться так, как отображается на этом устройстве. Можно переходить к отладке CSS.

В Google Chrome встроен великолепный отладчик, которым я с удовольствием пользуюсь. Пожалуй на этом все. Этих инструментов вполне достаточно для отладки отображения сайта в мобильных устройствах и других браузерах. В целом, данные расширения вполне эмулируют используемое устройство. Это очень удобно использовать в отладке сайтов, которые подгружают различные CSS в зависимости от устройства, обратившегося к сайту.

Желаю Вам удачи и хорошего настроения.

Автор: Darkeye.  

Еще интересное в сети.

  

 

Перейти к ленте статей

Добавить комментарий