Из этой статьи вы узнаете, как использовать настольное приложение Safari от Apple для проверки производительности мобильных веб-страниц в Safari для iPhone.
Шаги
Часть 1 из 3: Включение Web Inspector на вашем iPhone
Шаг 1. Откройте настройки вашего iPhone
Это серый значок с шестеренками на главном экране.
Шаг 2. Прокрутите вниз и коснитесь Safari
Он находится в четвертой или пятой группе настроек вместе с другими приложениями Apple iPhone, такими как Почта и Контакты.
Шаг 3. Прокрутите вниз и нажмите «Дополнительно»
Он находится внизу меню.
Шаг 4. Переместите кнопку рядом с «Веб-инспектором» в положение «Вкл.»
Это последний параметр, который при включении станет зеленым.
Часть 2 из 3. Включение Web Inspector на Mac
Шаг 1. Откройте Safari на своем Mac
Это приложение выглядит как синий компас.
Шаг 2. Щелкните Safari
Он находится в строке меню в верхнем левом углу экрана.
Шаг 3. Щелкните «Настройки»
Шаг 4. Щелкните «Дополнительно»
Это самая правая вкладка в верхней части окна.
Шаг 5. Установите флажок «Показать меню разработки в строке меню»
" Он находится внизу окна.
Шаг 6. Подключите ваш iPhone
Используйте USB-кабель, входящий в комплект поставки устройства, для подключения iPhone к Mac.
Часть 3 из 3: Использование Web Inspector в Safari для iPhone
Шаг 1. Откройте веб-сайт
В Safari для iPhone откройте мобильную веб-страницу, которую нужно отладить.
Шаг 2. Щелкните «Разработать»
Это третье раскрывающееся меню справа в Safari для Mac.
Шаг 3. Щелкните на своем iPhone
Он будет указан в верхней части меню.
Шаг 4. Щелкните на веб-сайте
Он появляется во всплывающем окне справа от вашего iPhone.
Если вы не открывали веб-сайт в приложении Safari на своем iPhone, вы увидите сообщение «Нет доступных для проверки приложений»
Шаг 5. Осмотрите страницу
Используя Safari на вашем Mac, вы можете улучшить и измерить производительность мобильных страниц на вашем iPhone.
- Web Inspector позволяет запускать команды на JavaScript для создания более динамичного интерактивного взаимодействия с пользователем, например анимации и сообщений в реальном времени.
- Проверяйте элементы DOM (объектной модели документа) на наличие ошибок в командах HTML, XML или JavaScript.
- Используйте CSS для обновления или редактирования макета, цветов и шрифтов на мобильных страницах.
