Найти тему
Apple SPb Event

Как использовать веб-инспектор в Safari на iOS и macOS

Оглавление

[via]

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

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

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

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

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

iCloud профиль

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

macOS

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

iOS

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

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

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

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

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

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

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

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

Еще по теме: