Safari для iOS включает дополнительную консоль отладки, которая помогает веб-разработчикам отслеживать и решать проблемы с веб-страницами на iPhone и iPad.
Более того, в последних версиях iOS он фактически использует тот же веб-инспектор, что и Safari на рабочем столе, а это означает, что если вы подключаете iPhone или iPad к компьютеру, вы можете использовать инструменты отладки Safari напрямую с устройством iOS или iPadOS.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Более старые версии iOS также имеют эту возможность, и, хотя они не такие всеобъемлющие, как настольные инструменты отладки и разработчика Safari, она по-прежнему полезна и ее легко включить или отключить на iPhone и iPad.
Давайте узнаем, как включить эту функцию как в новых, так и в старых версиях iOS, а также узнаем, в чем разница между версиями.
Где меню отладки в Телеграм / Скрытое меню разработчика
Как включить и использовать Web Inspector в Safari для iPhone и iPad
В современных версиях iOS и iPadOS вот как работает веб-инспектор Safari:
- Откройте «Настройки»> «Safari»> «Дополнительно», затем нажмите, чтобы включить «Веб-инспектор».
- Подключите iPhone или iPad к Mac, затем перейдите в Safari и включите меню разработчика, если вы еще не сделали этого, перейдя в Safari> Настройки> Дополнительно> Показать панель меню разработки.
- Потяните вниз строку меню «Разработка» и найдите iPhone или iPad, а затем откройте веб-страницу, которую вы хотите отладить.
- Откроется Safari Web Inspector, где вы можете отлаживать и проверять веб-элементы с устройства iOS или IPadOS прямо в Safari на Mac.
Теперь при навигации на iPhone или iPad вы обнаружите, что веб-инспектор в Safari на Mac будет обновляться.
Вы можете получить доступ к консоли отладки через вкладку Console в веб-инспекторе, и вы можете получить доступ к отладчику через вкладку Debugger. И, конечно же, обычные инструменты веб-инспектора для элементов, ресурсов, сети и т. Д. Также доступны для использования.
Вы также можете использовать трюк с просмотром исходного кода для iOS и iPadOS, когда находитесь в пути, если это необходимо.
Как включить консоль отладки в более старых версиях iOS
Если у вас более старая версия iOS на более старом iPhone или iPad, весь процесс отладки находится на устройстве, и у вас нет возможности подключить его к Safari на Mac. Тем не менее, это все еще довольно полезно, вот как это работает:
- Запустите «Настройки» и нажмите «Safari».
- Нажмите на «Дополнительно»
- Установите «Консоль отладки» в положение ВКЛ.
После включения нажмите на консоль отладки в верхней части любого экрана Safari, чтобы увидеть ошибки веб-страницы.
В списке по умолчанию отображаются все ошибки, но вы можете перейти к более конкретным ошибкам HTML, JavaScript и CSS, нажав их по отдельности.
Еще один полезный инструмент для мобильных веб-разработчиков – Firebug Lite для iOS, который использует букмарклет javascript для загрузки более простой версии популярного инструмента разработки Firebug. Эта функция, вероятно, наиболее полезна и для более старых версий iOS, поскольку в новых версиях есть новые возможности.
Используете ли вы какие-либо инструменты веб-разработчика для iPhone или iPad? Поделитесь с нами любыми советами, приемами, приложениями или методами в комментариях ниже.
Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)
Источник: btip.ru
Отладка в мобильном Safari
Есть несколько способов потестировать и подебажить сайт или веб-приложение в мобильном Safari:
- с помощью user agent в десктопном браузере;
- с помощью физического устройства – реального iPhone или iPad подключенному к Mac через USB-порт;
- с помощью виртуального устройства – симулятора iOS в Xcode.
Во всех трех случаях понадобится Mac и десктопный Safari со включённым Web Inspector.
Как включить Web Inspector в Safari
Если в воем Safari на Mac вы не можете найти веб-инспектор, значит его нужно включить. Для этого, из главного меню перейдите Safari – Preferences – Advanced (Safari – Настройки – Дополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню). В меню появится пункт Develop (Разработка), а в контекстном меню Safari, пункт для вызова веб-инспектора Inspect Element (Исследовать Элемент).
Горячие клавиши для вызова веб-инспектора: Opt + Cmd + I
Используя команды меню Develop, можно просматривать код веб-страниц, менять юзер агент, включать и отключать различные элементы страниц, чистить кэш и другое.
Отладка мобильного Safari с помощью User Agent и Web Inspector
Самый простой способ заглянуть «под капот» мобильного сайта – использовать веб-инспектор десктопного Safari, эмулируя необходимое iOS устройство. Способ не заменит честного тестирования на физических устройствах, так как не учитывает всех их особенностей, однако будет полезен при верстке или быстрой диагностики проблемы, когда реального устройства нет под рукой.
Чтобы эмулировать работу сайта на мобильном Safari, перейдите на сайт, включите режим адаптивного дизайна Develop – Enter Responsive Design Mode (Разработка – Войти в режим адаптивного дизайна), затем выберите устройство и при необходимости юзер агент (версию мобильного браузера).
Для отладки используйте веб-инспектор. Доступны те же инструменты инспектора, что и для десктопной версии сайтов, включая консоль.
Отладка мобильного Safari с помощью iPhone или iPad
Часто ошибка может воспроизводится на определенной версии браузера, операционной системе или устройстве. Поэтому способ тестирования и отладки на реальных iPhone или iPad самый «честный» из перечисленных. Однако он же самый неудобный и затратный: множество устройств надо иметь при себе, заряжать, поддерживать.
Чтобы провести отладку, подключите кабелем iPhone или iPad к Mac. Если появится сообщение Доверять этому компьютеру?, выберите Да, тем самым разрешив доступ к устройству.
В настройках мобильного Safari: Settings – Safari – Advanced (Настройки – Safari – Дополнения) включите Web Inspector (Веб-инспектор).
На устройстве в мобильном Safari перейдите на сайт, отладку которого хотите провести. Затем откройте Safari на Mac. Если устройство корректно подключилось, то в меню Develop (Разработка) появится пункт с названием вашего устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и вы сможете провести отладку.
Отладка мобильного Safari с помощью симулятора iOS в Xcode
Удобный способ для разработки и тестирования адаптивных сайтов и веб-приложений на устройствах максимально приближенных к реальным.
Симулятор все же не реальное устройство, за то не требуется держать «зоопарк» различных девайсов, а переключение между ними происходит в несколько кликов мыши.
Simulator – это приложение, которое поставляется в комплекте с Xcode. Скачайте его из магазина приложений .
Откройте Xcode. В меню выберите Xcode – Open Developer Tool – Simulator (Xcode – Открыть инструменты разработчика – Симулятор). Когда симулятор запустится, рекомендую сразу закрепить его в Dock, чтобы каждый раз не запускать Xcode.
Выберите устройство для эмуляции в меню Hardware – Device.
В устройстве на эмуляторе откройте Safari и перейдите на сайт. Затем откройте Safari на Mac. В меню Develop (Разработка) появится пункт с Simulator – Модель выбранного устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и можно будет провести отладку.
На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.
Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.
Источник: trofimovdigital.ru