Мобильного трафика становится всё больше, люди активно общаются и покупают в интернете, используя смартфон. Компьютеры остаются только для работы и решения сложных задач.
Разработчики часто проверяют отображение контента на мобильных устройствах с помощью эмуляторов. Это софт, который позволяет приблизительно посмотреть, как отображается сайт на iPhone. При этом пользователь сидит за компьютером и управляет виртуальным айфоном в режиме реального времени.
В статье расскажем, как пользоваться консолью разработчика на смартфоне, чтобы не тратить время на эмуляторы.
Веб-инспектор в Safari
Если вы по работе часто используете панель разработчика, то наверняка устали от того, что напрямую посмотреть исходный код не получается. Доступ к консоли на мобильном Safari осуществляется через браузер на Mac.
iCloud профиль
Чтобы использовать веб-инспектор в Safari на iOS, необходимо привязать к телефону и Mac одинаковый профиль iCloud и настроить синхронизацию.
macOS
- Откройте настройки.
- Найдите Apple ID и запишите идентификатор учётной записи.
- Выберите iCloud и включите Safari на панели справа.
- Зайдите в настройки Safari и выберите вкладку «Дополнительно».
- Включите опцию «Показать меню разработки в строке меню».
iOS
- Зайдите в настройки смартфона.
- Выберите аккаунт в верхней части меню.
- Убедитесь, что на телефоне привязан тот же Apple ID, что и на Mac.
- Найдите iCloud и включите его для Safari.
- Вернитесь на главный экран настроек и выберите пункт «Общие».
- Сбросьте местоположение и настройки конфиденциальности.
Включение веб-инспектора
Все готово к подключению iOS к Mac для синхронизации Safari.
- Подключите iPhone или iPad к Mac по кабелю.
- Согласитесь с запросом о доверии и введите код доступа.
- Откройте браузер на iPhone и зайдите на сайт, который нужно отладить
- Запустите Safari на Mac, выберите пункт «Разработка».
- В подменю должен появиться iPhone. Выберите его и зайдите на сайт.
- Откроется новое окно с веб-инспектором.
Решение проблем
В некоторых случаях инструкция не сработает. Это проблема macOS, которую можно решить. Выполняйте действия ниже после того, как шаги, описанные выше, не дали результата.
- Отключите iPhone от компьютера
- Зайдите в настройки смартфона.
- Сбросьте данные местоположения и конфиденциальности.
- Отключите Wi-Fi на iPhone, включите Bluetooth и мобильную точку доступа.
- Подключите смартфон к компьютеру.
- Создайте доверенную связь.
- Откройте Safari на iPhone и посетите сайт, который хотите отладить.
- На Mac тоже запустите браузер. В разделе «Разработка» выберите iPhone и пункт «Подключиться через сеть».
- Вернитесь в «Разработку», затем выберите пункт iPhone и сайт, который открыт на iPhone.
Отладка сайта на iOS может пригодиться разработчикам и тестировщикам. Каждый раз подключаться через Mac неудобно, но других стандартных решений нет. Старайтесь всегда устанавливать последнюю версию Safari для iPhone и Mac, чтобы защититься от различий в отображении контента.