Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Отладка сайта на мобильных устройствах

Отладка сайта на мобильных устройствах

30 Января 2020
Олег Мостовой
Backend Developer
Олег Мостовой
следующая статья

Тема не новая, но я хочу поделиться своим опытом отладки сайтов на Битрикс: Управление сайтом.
Как уже было сказано, сайт должен хорошо отображаться как на десктопе так и на мобильных устройствах. И для верстки с отладкой отличным инструментом является эмулятор мобильного устройства, встроенный в браузер. Однако бывают случаи, при которых и в эмуляторе страница отображается нормально, и скрипты работают корректно, а непосредственно на мобильном устройстве — ну никак.  В таком случае нужно отлаживать страницу непосредственно на проблемном гаджете. Мой кейс основан на скрипте, который выполнял разные функции в зависимости от устройства. Для этих случаев браузеры предоставляют возможность отладки страницы непосредственно с удаленного устройства, подключенного к компьютеру. Собственно, ниже будет описано подключение смартфона на Android к Google Chrome и iPad к Safari

Отладка мобильной версии сайта на Google Chrome

Для начала нужно включить на смартфоне функции для разработчиков: зайти в настройки, выбрать пункт информации о телефоне и многократно нажимать на пункт «Номер сборки», пока не появится уведомление «Вы стали разработчиком!». Если кто-то не знал о такой операции, пожалуйста, сделайте репост статьи или, хотя бы, поставьте лайк.

Как включить Режим отладки веб-страницы на Android

В настройках раздела «Функции для разработчика» включить пункт «Отладка по USB».
Далее следует подключить устройство к компьютеру через USB-кабель и открыть нужный сайт в Chrome на смартфоне. На этом настройка cмартфона завершена.
Далее открываем на компьютере Google Chrome и в нем — инспектор. В меню DevTools выбираем пункт More tools, а в нем Remote devices.

Отладка по USB в Chrome

В инспекторе мы увидим наш подключенный телефон, адрес открытой вкладки в мобильном браузере, а также кнопку «Inspect», нажатие которой позволяет проинспектировать страницу.

Так выглядит окно для отладки страниц в android

Вот так выглядит окно отладки страницы:

Так выглядит окно отладки сайта на Android с синхронизацией действий

Все манипуляции со страницей синхронизированы. Скролл и касания на смартфоне также отображаются на странице отладки, и наоборот. 

Отладка версии сайта для iPad  в Safari

Подготовка этого гаджета займет намного меньше времени. В настройках iPad выберите Safari, и в его дополнительных настройках включите Веб-инспектор. На этом настройка устройства завершена.
На компьютере открываем Safari. В меню выбираем «Разработка» находим наше устройство и сайт.

Отладка страницы на Safari

Откроется инспектор, в котором уже можно отлаживать страницу, но сама страница на компьютере отображаться не будет, что я считаю не очень удобным. Но, тем не менее, на самом IPad выбранный в разметке элемент будет подсвечиваться. 

отладка на Safari происходит с подсветкой кода и элемента

Просто и эффективно

Такой нехитрый подход к отладке сайта полезен тем, что можно сразу посмотреть, как работает сайт на настоящем устройстве. Так есть возможность учесть моменты, которые невозможно проверить или смоделировать на эмуляторах, или в случаях, когда нужно использовать сторонний функционал от Apple и Android. Надеюсь, вам это пригодится.

Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут