Мобильного трафика становится всё больше, люди активно общаются и покупают в интернете, используя смартфон. Компьютеры остаются только для работы и решения сложных задач.

Разработчики часто проверяют отображение контента на мобильных устройствах с помощью эмуляторов. Это софт, который позволяет приблизительно посмотреть, как отображается сайт на iPhone. При этом пользователь сидит за компьютером и управляет виртуальным айфоном в режиме реального времени.

В статье расскажем, как пользоваться консолью разработчика на смартфоне, чтобы не тратить время на эмуляторы.

Веб-инспектор в Safari

Если вы по работе часто используете панель разработчика, то наверняка устали от того, что напрямую посмотреть исходный код не получается. Доступ к консоли на мобильном Safari осуществляется через браузер на Mac.

iCloud профиль

Чтобы использовать веб-инспектор в Safari на iOS, необходимо привязать к телефону и Mac одинаковый профиль iCloud и настроить синхронизацию.

macOS

  1. Откройте настройки.
  2. Найдите Apple ID и запишите идентификатор учётной записи.
  3. Выберите iCloud и включите Safari на панели справа.
  4. Зайдите в настройки Safari и выберите вкладку «Дополнительно».
  5. Включите опцию «Показать меню разработки в строке меню».

 

iOS

  1. Зайдите в настройки смартфона.
  2. Выберите аккаунт в верхней части меню.
  3. Убедитесь, что на телефоне привязан тот же Apple ID, что и на Mac.
  4. Найдите iCloud и включите его для Safari.
  5. Вернитесь на главный экран настроек и выберите пункт «Общие».
  6. Сбросьте местоположение и настройки конфиденциальности.

Включение веб-инспектора

Все готово к подключению iOS к Mac для синхронизации Safari.

  1. Подключите iPhone или iPad к Mac по кабелю.
  2. Согласитесь с запросом о доверии и введите код доступа.
  3. Откройте браузер на iPhone и зайдите на сайт, который нужно отладить
  4. Запустите Safari на Mac, выберите пункт «Разработка».
  5. В подменю должен появиться iPhone. Выберите его и зайдите на сайт.
  6. Откроется новое окно с веб-инспектором.

 

Решение проблем

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

  1. Отключите iPhone от компьютера
  2. Зайдите в настройки смартфона.
  3. Сбросьте данные местоположения и конфиденциальности.
  4. Отключите Wi-Fi на iPhone, включите Bluetooth и мобильную точку доступа.
  5. Подключите смартфон к компьютеру.
  6. Создайте доверенную связь.
  7. Откройте Safari на iPhone и посетите сайт, который хотите отладить.
  8. На Mac тоже запустите браузер. В разделе «Разработка» выберите iPhone и пункт «Подключиться через сеть».
  9. Вернитесь в «Разработку», затем выберите пункт iPhone и сайт, который открыт на iPhone.

 

Отладка сайта на iOS может пригодиться разработчикам и тестировщикам. Каждый раз подключаться через Mac неудобно, но других стандартных решений нет. Старайтесь всегда устанавливать последнюю версию Safari для iPhone и Mac, чтобы защититься от различий в отображении контента.