Как отлаживать сайты на iPad

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

Если вы разрабатываете исключительно в среде MacOS и iOS, вам могут не понадобиться эти сторонние инструменты. Apple уже предоставила набор инструментов для работы.

И в этом посте мы покажем вам, как использовать их для доступа и отладки статических сайтов, а также сайтов WordPress в iOS для iPhone и iPad.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Без дальнейших церемоний, давайте начнем.

Рекомендуемое чтение: мобильная эмуляция в Google Chrome

Начиная
Сначала запустите Сафари и включите Инструменты разработчика через Safari> Настройки. На вкладке «Дополнительно» установите флажок «Показать разработку» в строке меню.
В строке меню Safari появится новое меню «Разработка».
Затем на вашем iPad или iPhone перейдите в «Настройки»> «Safari». Аналогично, в меню «Дополнительно» включите веб-инспектор, как показано ниже.
Для WordPress-сайта
Относительный путь необходим для правильной загрузки ссылок CSS, изображений и JavaScript в iPad или iPhone. Если вы разрабатываете сайты на основе WordPress, все пути активов являются абсолютными. Чтобы сделать их относительным путем, установите и активируйте этот плагин: Относительный URL,

После активации URL-адреса пути будут:

HTTP: // локальный: 8888 / WordPress /

… в нечто вроде того, что вы видите ниже:

/ WordPress /

Отладка сайта
Во-первых, вам нужно знать номер вашего сетевого IP-адреса. Перейдите в Системные настройки> Сеть. Там вы найдете IP-адрес. Кроме того, убедитесь, что ваши устройства Apple – Mac, iPad, iPhone – подключены к одной сети, чтобы вы могли получить беспроводной доступ к веб-сайту на iPad или iPhone.
На вашем iPad или iPhone запустите приложение Safari и получите доступ локальный: 8888 сопровождаемый Вашим каталогом веб-проекта – например локальный: 8888 / WordPress, Если вы настроили свой локальный сервер с помощью MAMP, локальный: 8888 должен быть вашим локальным адресом по умолчанию.

Как вы можете видеть ниже, мы просматриваем наш веб-сайт, который в данном случае основан на WordPress, на iPad.
Кроме того, чтобы иметь возможность отладки веб-сайта с помощью инструментов разработчика, вам необходимо подключить iPad или iPhone к компьютеру Mac с помощью USB. Затем в Safari перейдите в меню «Разработка» и выберите подключенное устройство.
Мы сделали.

На следующем снимке экрана мы выбираем Дерево DOM из Инструментов разработчика вы можете видеть, что соответствующие элементы на iPad или iPhone подсвечены. Теперь вы можете технически отлаживать свой сайт на iPad или iPhone, как на рабочем столе.