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

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

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

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

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

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

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

iCloud профиль

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

macOS

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

Safari macOS

 

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. Откроется новое окно с веб-инспектором.

Safari

 

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

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

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

Safari

 

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



0 Комментариев
You've successfully subscribed to Apple SPb Event
Great! Next, complete checkout for full access to Apple SPb Event
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.