Верстаем на мобильном: отладка сайтов с помощью телефона

11 March 2018
1,5k full reads
5k story viewsUnique page visitors
1,5k read the story to the endThat's 30% of the total page views
1,5 minute — average reading time

DevTools в современных браузерах позволяет переключиться в адаптивный режим и весьма неплохо справляется со своей задачей. Но иногда случается так, что где-то что-то на мобильном выглядит не так, как на десктопе. В таких случаях понять в чём дело, а не тыкать пальцем в небо, поможет инспектирование элементов прямо на мобильном.Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.+

  • Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.

Включаем режим разработчика
Включаем режим разработчика
Включаем режим разработчика
Переходим в меню разработчика
Переходим в меню разработчика
Переходим в меню разработчика
Включаем отладку по USB
Включаем отладку по USB
Включаем отладку по USB

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»
Ставим галочку «Discover USB devices».
Ставим галочку «Discover USB devices».
Ставим галочку «Discover USB devices».

Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».
Видим слева своё устройство и его статус. Кликаем по нему.
Видим слева своё устройство и его статус. Кликаем по нему.
Видим слева своё устройство и его статус. Кликаем по нему.
Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.
Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.
Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.
Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.
Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.
Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.
Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».
Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».
Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».
Подключаем телефон, видим его справа сверху. Кликаем по нему.
Подключаем телефон, видим его справа сверху. Кликаем по нему.
Подключаем телефон, видим его справа сверху. Кликаем по нему.
Разрешаем доступ на мобильном.
Разрешаем доступ на мобильном.
Разрешаем доступ на мобильном.
Справа сверху видим, что подключение разрешено. Слева отображается список вкладок. Выбираем какую-нибудь.
Справа сверху видим, что подключение разрешено. Слева отображается список вкладок. Выбираем какую-нибудь.
Справа сверху видим, что подключение разрешено. Слева отображается список вкладок. Выбираем какую-нибудь.
Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.
Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.
Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.
Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.
Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.
Появится QR-код для сканирования.
Появится QR-код для сканирования.
Появится QR-код для сканирования.
На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.
На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.
На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.
  • Всё!