Если вы не знаете, веб-страница состоит из различных элементов, которые отформатированы так, чтобы выглядеть как единое целое. Веб-разработчики должны понимать каждый из этих элементов, их расположение на веб-странице и то, как они функционируют отдельно.
Пользователям Windows и Mac знакома функция «Inspect» или «Inspect element», которая доступна при щелчке правой кнопкой мыши по веб-странице. Эта опция позволяет просматривать исходный код веб-сайта, видеть все его элементы, код за каждым из них и редактировать его файлы Javascript, HTML, CSS и другие медиа-файлы. Таким образом, вы можете узнать, как работает определенный веб-сайт, и делать модификации в своем собственном браузере, не влияя на фактическую веб-страницу.
Хотя опция инспектирования обычно известна как инструмент для «разработчиков», она не ограничена разработчиками. Даже начинающие и непрофессионалы могут использовать этот инструмент, чтобы узнать, как создается веб-сайт и как его элементы работают вместе. Если вы хотите использовать опцию «inspect element» при просмотре веб-страниц на iPhone, эта статья поможет вам разобраться, как это сделать.
Можно ли непосредственно проверять веб-элементы в Safari?
Простой ответ — нет. Safari на iOS, как и многие другие мобильные браузеры, не предоставляет нативного инструмента для просмотра разработки веб-страницы. Apple не привела причину отсутствия этой опции, но мы предполагаем, что это может быть связано с малым размером дисплея на смартфонах. Навигация по проверяемым блокам и редактирование кода веб-страницы или поиск элементов может быть сложным на маленьком экране.
Еще одной причиной может быть ограниченная вычислительная мощность смартфонов. В то время как современные iPhone могут справляться с играми с интенсивной графикой, просмотр информации о веб-странице может быть сложным, так как не все веб-сайты созданы одинаково. Некоторые веб-сайты могут иметь множество ресурсов и слоев, которые тщательно разработаны для беспрепятственного внешнего вида, но загрузка этих ресурсов во время инспекции может занять время.
Inspect Element на iPhone: какие есть альтернативы?
Хотя вы не можете использовать инструмент «Inspect Element» нативно в приложении Safari на iOS, все же есть способы обойти это ограничение. Ниже приведены три метода, которые вы можете использовать для проверки элементов на посещаемых вами веб-страницах в Safari на вашем iPhone.
Метод #01: Использование Safari на вашем Mac
Если у вас есть устройство macOS вместе с iPhone, вы все равно можете проверять веб-страницы непосредственно из приложения Safari на вашем Mac. Apple позволяет вам отлаживать веб-страницы из Safari на iOS, используя его инструменты «Develop», аналогично тому, как вы делали бы на Mac. Хотя процесс отладки относительно прост, настройка в начале может занять больше времени, чем ожидалось. Однако мы объясним процесс настройки самым простым способом, чтобы помочь вам легко проверять страницы после первого раза.
Включение веб-инспектора на iOS
Для отладки веб-элементов в приложении Safari для iOS вам необходимо включить Инспектор веб-страниц. Для этого перейдите в приложение Настройки и выберите «Safari».
Внутри Safari прокрутите вниз и коснитесь «Дополнительно».
На следующем экране переместите переключатель рядом с «Инспектор веб-страниц» до зеленого состояния.
Настройка на Mac
После того, как вы включили Инспектор веб-страниц для Safari на iOS, пришло время настроить его на вашем Mac. Откройте приложение Safari на вашем Mac, нажмите на «Safari» в меню и выберите «Настройки».
В окне Настроек выберите вкладку «Дополнительно» и установите флажок рядом с опцией «Показывать меню разработчика в строке меню».
Теперь вы увидите опцию «Разработка» в меню вверху.
Подключите ваш iPhone к Mac с помощью USB-кабеля. После подключения нажмите на «Разработка» в меню и выберите ваш iPhone из списка устройств.
Чтобы проводить беспроводную проверку веб-страниц, выберите опцию «Подключиться через сеть» в меню iPhone.
Теперь вы можете отключить iPhone от Mac и все равно проводить беспроводную проверку веб-страниц.
Проверка веб-страниц с iOS на Mac
С включенной опцией «Подключиться через сеть» вы можете проверять веб-страницы из Safari на iOS непосредственно на вашем Mac. И ваш iPhone, и Mac должны быть подключены к одной беспроводной сети.
Откройте Safari на вашем iPhone и перейдите на веб-страницу, которую хотите проверить.
Разблокируйте iPhone и откройте Safari на вашем Mac. Нажмите на «Разработка» в меню и выберите «iPhone».
Наведите курсор на «iPhone», чтобы увидеть список открытых веб-страниц на iOS. Выберите веб-страницу, которую хотите проверить.
На вашем Mac откроется новое окно, отображающее всю информацию, которую можно проверить на выбранной веб-странице.
Во время проверки вы можете определить, к какой части страницы указывает строка кода, ища синюю область на вашем iPhone.
Выделенная часть веб-страницы на вашем iPhone представляет код, над которым вы наводите курсор на вашем Mac. Перемещение между строками кода будет перемещать выделение по разным частям страницы в режиме реального времени.
Если у вас нет Mac или вы хотите просмотреть веб-сайт непосредственно с вашего iPhone, вы можете использовать приложение iOS Shortcuts. Это приложение позволяет просматривать исходный код веб-страницы, редактировать веб-страницу, извлекать изображения с веб-сайта и получать доступ к предыдущим версиям веб-страницы в приложении Safari. Однако для каждой из этих целей требуется отдельный ярлык.
Мы нашли несколько ярлыков, которые вы можете использовать для отладки веб-сайтов на iOS. В них входит ярлык «Просмотр исходного кода», который отображает исходный код веб-страницы в базовом формате. Ярлык «Редактировать веб-страницу» позволяет редактировать содержимое веб-страницы локально, что позволяет вам тестировать новые дизайны или форматы на вашем iPhone. Ярлык «Получить изображения с страницы» извлекает все изображения с веб-страницы и отображает их вместе. Ярлык «Wayback Machine» переносит вас на Wayback Machine на Internet Archive, где вы можете просматривать предыдущие версии страницы.
Чтобы добавить эти ярлыки на ваш iPhone, вы можете нажать на соответствующие ссылки или найти их в разделе Shortcuts > Галерея. Как только вы найдете нужный вам ярлык, коснитесь его, а затем коснитесь опции «Добавить виджет», чтобы добавить его на ваш iPhone. Эти ярлыки появятся в разделе Мои ярлыки > Все ярлыки и также можно получить доступ к ним из листа Общий доступ Safari.
Чтобы проверить веб-страницу, откройте ее в Safari и коснитесь кнопки «Поделиться». Прокрутите вниз в листе Общий доступ, чтобы найти ярлыки, которые вы добавили на свой iPhone. Выбор опции «Редактировать веб-страницу» позволит вам редактировать части веб-страницы непосредственно. Для трех других опций вам будет предложено разрешить доступ ярлыку к веб-странице. Коснитесь «Разрешить один раз», чтобы продолжить.
Метод №03: Использование приложений сторонних разработчиков
Если вы не удовлетворены вышеуказанными результатами, вам потребуется исследовать приложения сторонних разработчиков, чтобы изучить элементы веб-страницы. Подобно Safari, невозможно проверить веб-страницу в популярных веб-браузерах, таких как Chrome, Firefox, Brave и т. д. Вместо этого вам придется полагаться на приложение, специально созданное для этой задачи, и найти такие приложения может быть сложно.
Хотя простой поиск в App Store предоставит вам различные результаты для проверки веб-элементов, бесплатных приложений с высоким рейтингом не так много. Основываясь на отзывах пользователей, мы рекомендуем установить приложения Inspect Browser или Gear Browser из App Store, так как они предлагают проверку и редактирование элементов для JavaScript, CSS и HTML.
Это все, что вам нужно знать о проверке элементов на iPhone.
