Отладка веб-сайта на iphone через Windows

Обновлено: 06.12.2022

В этой статье объясняется, как отлаживать страницу, открытую в iOS (iPhone) Safari в Chrome на ПК с Windows.

Цель этой статьи

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

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

В случае устройств Android отладку можно выполнить с помощью Chrome на ПК. В этом случае поможет следующая официальная статья Google.

В этой статье я кратко опишу процедуру отладки Safari на iOS (iPhone) с помощью инструментов разработчика Chrome для ПК, когда вы работаете в Windows.

Сначала установите Scoop, программное обеспечение для управления пакетами для Windows.

Что такое Scoop?

Scoop — это командный менеджер пакетов для Windows.
После установки Scoop вы можете устанавливать и удалять программное обеспечение с помощью команд PowerShell (*) (или командной строки).
*PowerShell является преемником командной строки Windows. В следующей статье это подробно объясняется.
Справочник (на японском языке): PowerShell(パワーシェル)は何ができるの?メリット、使い方、実例まで|ドスパラ通販【公>

Официальный сайт Scoop: Scoop

Как установить Scoop

Используйте следующую команду для установки Scoop.

То же самое относится и к следующей команде.

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

Примечание: если вы получаете сообщение об ошибке, вам может потребоваться изменить политику выполнения (т. е. включить Powershell).

Если вы хотите изменить разрешения на выполнение Powershell и т. д., выполните следующую команду.

Однако это изменит разрешения для текущего пользователя, поэтому, если вы хотите применить их только к текущему пользователю и текущему процессу, выполните следующую команду.

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

После выполнения вышеуказанного вы увидите RemoteSigned со следующими типами разрешений.

Ограничено: все NG, что, по-видимому, установлено по умолчанию.
AllSigned: OK, если подписано.
RemoteSigned: локальные файлы в порядке, онлайн-файлы в порядке, если они подписаны.
Неограниченный: все в порядке, но те, что есть в сети, должны быть проверены перед выполнением.

Цитата (страница на японском языке): Внутренний случайный дневник SE: изменение политики выполнения PowerShell

.

Однако в этом случае, когда вы выйдете из Powershell, разрешения вернутся к Restricted , поэтому, если вы хотите снова изменить разрешения, вам нужно будет снова запустить «Set-ExecutionPolicy RemoteSigned -scope Process».

Проверьте, установлен ли Scoop.

Выполните следующую команду справки, и если появится справка, установка будет завершена.

Установите iOS WebKit Debug Proxy и RemoteDebug iOS WebKit Adapter.

Обзор

Следующий шаг – установка следующих трех приложений (библиотек).

  • Прокси-сервер отладки iOS WebKit: инструмент для управления Safari на реальной iOS
  • RemoteDebug iOS WebKit Adapter: инструмент, необходимый для отладки iOS с помощью инструментов отладки на основе Chrome.
  • libimobiledevice : библиотека для связи со службами iOS

На этот раз мы действуем, как описано в файле README.txt RemoteDebug iOS WebKit Adapter ниже.

ios-webkit-debug-proxy с установкой libimobiledevice

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

"Корзина" выглядит как файл JSON, который содержит репозиторий Git для каждого приложения и инструкции по установке приложения.

У Scoop есть приложение (сегмент), которое по умолчанию называется основным сегментом, но приложения, которые не соответствуют критериям основного сегмента, даже если они по-прежнему считаются полезными, хранятся в сегменте, называемом дополнительным .

Это дополнение включает ios-webkit-debug-proxy , поэтому сначала нам нужно выполнить приведенный выше код.

Теперь, после установки дополнительного сегмента с помощью команды scoop Bucket add extras, установите ios-webkit-debug-proxy с помощью следующей команды.

Установите remotedebug-ios-webkit-adapter

Это можно установить с помощью NPM. Команда выглядит следующим образом.

Включить веб-инспектор Safari на iOS (iPhone).

Выполните следующие действия, чтобы включить его.

  1. Перейдите в настройки iOS (iPhone) и откройте настройки Safari.
  2. Нажмите "Дополнительно".
  3. Нажмите переключатель в Веб-инспекторе, чтобы включить его.

Подключите iPhone к ПК и доверьтесь устройству

Подключите iPhone к компьютеру с помощью кабеля.

На вашем iPhone появится всплывающее окно с вопросом «Доверяете ли вы этому компьютеру?» и нажмите «Да».

На ПК запустите iTunes, и вы увидите похожее сообщение, поэтому нажмите «Да».

Запустить remotedebug_ios_webkit_adapter

Запустите его с помощью следующей команды.

Обратите внимание, что когда вы запускаете приведенную выше команду, ios-webkit-debug-proxy также будет выполняться автоматически, поэтому здесь вам не нужно делать ничего особенного.

Настройте параметры инструментов разработчика Chrome, чтобы вы могли видеть страницы, открытые в Safari на iOS

Сначала перейдите на страницу настроек инструментов разработчика Chrome на своем ПК ( chrome://inspect/ ) и нажмите «Настроить» в разделе «Обнаружение сетевых целей».

Пожалуйста, обратитесь к следующему изображению.


Далее введите localhost:9000 в появившемся всплывающем окне и нажмите "Готово" .


Теперь настройка установлена.

Отладьте страницу, которую вы просматриваете в iPhone Safari, с помощью инструментов разработчика Chrome на ПК.

Сначала перейдите на какой-нибудь веб-сайт в Safari на iPhone.

Затем страница, которую вы просматриваете, будет отображаться в разделе «Удаленная цель» на странице «Инструменты разработчика», открытой в браузере вашего ПК. Когда он отобразится, нажмите на ссылку проверки, чтобы открыть инструменты разработчика.

Вы также можете обратиться к следующему изображению.


Затем вы можете просматривать элементы в инструментах разработчика и запускать JS в консоли, как на обычной веб-странице.

Инструменты разработчика на ПК будут синхронизированы со страницей и позицией прокрутки, просматриваемой в Safari на iPhone. Однако прокрутка не синхронизируется в реальном времени, а время синхронизации, похоже, зависит от начального и конечного положения касания, поэтому в синхронизации есть небольшой разрыв.

Выйти из проверки

Нажмите Ctrl + C на терминале, где вы только что запустили remotedebug_ios_webkit_adapter, чтобы завершить процесс синхронизации (remotedebug_ios_webkit_adapter).

Если при отладке Safari на iPhone вы столкнулись с проблемой, которую не удается решить с помощью одного эмулятора, попробуйте его.

Значок профиля

Директор по Интернету и маркетингу

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


Соответственно, как отлаживать Safari в Windows? Ctrl + «», чтобы открыть «Настройки Safari»> «Дополнительно»> «Показать меню «Разработка» в строке меню. Закройте и нажмите Alt, чтобы увидеть результат.

Вы спрашивали, как отладить устройство iOS в Windows?

  1. Установите узел.
  2. Установите iTunes и подключите его к своему устройству. (На вашем iPad/iPhone появится всплывающее окно для авторизации). Убедитесь, что веб-инспектор разрешен на вашем iPad/iPhone.

В связи с этим, как мне отлаживать Safari на моем iPhone?

  1. Подключите устройство iOS к машине.
  2. Включите параметр «Веб-инспектор». Для этого выберите «Настройки» > «Safari» > прокрутите вниз > «Открыть расширенное меню»>
  3. Откройте нужную веб-страницу для отладки или предварительного просмотра в мобильном браузере Safari. После этого включите меню «Разработка» на устройстве Mac.

Кроме того, как проверить Safari в Windows?

  1. Нажмите правой кнопкой мыши любую часть страницы и выберите "Проверить элемент". Щелчок правой кнопкой мыши на определенном элементе страницы откроет этот элемент в режиме инспектора.
  2. Выберите «Разработка» > «Показать веб-инспектор» в верхней строке меню.
  3. Используйте сочетание клавиш команда-опция-I.

Некоторым пользователям Windows может потребоваться запустить веб-браузер Apple Safari на ПК с Windows. … Версия Safari для Windows, которую вы все еще можете загрузить и установить, — это Safari 5.1. 7, а также без проблем устанавливается и работает в Windows 10, Windows 8 или Windows 7.

Как получить доступ к инструментам разработчика в Safari?

Если вы являетесь веб-разработчиком, в меню «Разработка» в Safari есть инструменты, с помощью которых вы сможете убедиться, что ваш веб-сайт корректно работает со всеми стандартными веб-браузерами. Если вы не видите меню «Разработка» в строке меню, выберите «Safari» > «Настройки», нажмите «Дополнительно», затем выберите «Показать меню «Разработка» в строке меню».

Как отлаживать Chrome на iOS?

  1. Определите веб-страницу, которую вы хотите отлаживать на устройстве iOS, и нажмите "Проверить".
  2. Появится отладчик Chrome, который использует контекст Chrome и строку пользовательского агента вместо Safari.

Как отлаживать iOS Webview в Windows?

  1. Откройте URL-адрес веб-приложения в браузере Safari на устройстве или откройте мобильное приложение на устройстве.
  2. Отображается меню устройства для Chrome DevTools. В нем нажмите «Настроить» и добавьте порт, используемый для отладки:

Как выполнить отладку в BrowserStack?

  1. Подпишитесь на бесплатную пробную версию BrowserStack App Live.
  2. Загрузите свое приложение через Play Маркет или напрямую загрузите APK-файл из системы.
  3. Выберите нужное реальное устройство Android.
  4. Начать тестирование и отладку.

Как подключить веб-инспектор Safari к моему iPhone?

  1. Откройте приложение "Настройки".
  2. Нажмите "Safari".
  3. Прокрутите вниз и выберите "Дополнительно".
  4. Включите веб-инспектор.

Могу ли я использовать Safari для веб-разработки?

Компания Apple привнесла в Интернет свой опыт разработки инструментов для macOS и iOS. Safari включает в себя Web Inspector, мощный инструмент, который упрощает изменение, отладку и оптимизацию веб-сайта для достижения максимальной производительности и совместимости на обеих платформах.

Как мне получить параметры разработчика на моем iPhone?

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

Можно ли загрузить Safari в Windows?

Браузер Safari доступен для macOS и Windows. Но не поддерживается для ОС на базе Linux. Вы можете легко загрузить браузер Apple Safari на любой компьютер и ноутбук, используя приведенные ниже ссылки для скачивания. Safari — это проприетарное программное обеспечение Apple.

Как открыть инструменты разработчика в Safari на iPad?

1Нажмите значок «Настройки» на рабочем столе iPhone или iPad. 2Нажмите, чтобы выбрать Safari из списка программного обеспечения, доступного на вашем устройстве. 3Прокрутите экран вниз и нажмите «Разработчик». 4Нажмите кнопку Вкл., чтобы активировать консоль отладки.

Можем ли мы проверить в BrowserStack?

Чтобы проверить веб-элемент в определенной версии Chrome, выполните следующие действия: Зарегистрируйтесь для получения бесплатной пробной версии на BrowserStack Live. Перейдите к панели управления Live после регистрации. Выберите нужную операционную систему (Android, Windows, macOS).

Apple iOS — вторая по популярности мобильная операционная система в мире. На ее долю приходится 24 % мирового рынка. Естественно, пользователи iOS вносят значительный вклад в общий мобильный веб-трафик. Safari является браузером по умолчанию для устройств iOS (iPhone и iPad), и можно с уверенностью предположить, что большинство пользователей iOS выходят в Интернет через браузер Safari.

Учитывая вышеупомянутые данные, владельцы веб-сайтов, очевидно, должны убедиться, что их сайты оптимизированы для Safari. Это помогает обеспечить удобство работы мобильных пользователей на разных платформах.

Однако для отладки и оптимизации веб-сайтов для iOS их необходимо тестировать на различных комбинациях устройств iOS и браузеров. Это может быть непросто, особенно для команд, работающих в ОС Windows, поскольку последние версии Safari недоступны для Windows.

В этой статье объясняется простой метод отладки iPhone Safari в Windows с использованием реального облака устройств BrowserStack.

Отладка iPhone Safari в Windows с помощью BrowserStack

BrowserStack упрощает отладку iPhone Safari независимо от используемой операционной системы. Пользователи Windows (в Windows XP, 7,8,10) могут тестировать и отлаживать нужную комбинацию iPhone и Safari непосредственно из своего веб-браузера (Firefox, Chrome, Safari и т. д.). Нужно просто создать бесплатную учетную запись на BrowserStack, чтобы начать тестирование в реальном браузере Safari на реальном iPhone.

Для начала выполните следующие действия:

Отладка iPhone Safari в Windows

    для бесплатной пробной версии BrowserStack Live.
  1. После создания учетной записи перейдите к Live Dashboard.
  2. Из доступных операционных систем выберите iOS.
  3. Наведите указатель мыши на нужный телефон. (Для примера возьмем iPhone 11 Pro)
  4. Доступны два варианта: значок Chrome и Safari. Нажмите на логотип Safari.
  5. На изображениях выше показано, как реальное облако устройств BrowserStack упрощает отладку любой комбинации iPhone и Safari.

    Инструменты разработчика в BrowserStack позволяют пользователю удаленно проверять компоненты HTML, CSS и JavaScript для определенного веб-элемента. Кроме того, когда команды получают доступ к последним и устаревшим версиям iPhone, им становится намного проще устранять любые проблемы для конкретного устройства iOS.

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

    Как упоминалось ранее, последние версии Safari недоступны для пользователей Windows. Из-за этого командам (в частности, пользователям Windows) очень сложно отлаживать веб-сайты на iPhone с помощью такой функции, как Web-Inspector.

    Однако такие платформы, как BrowserStack, помогают решить эту проблему, предлагая реальные устройства iOS для целей тестирования, независимо от операционной системы тестировщика. Кроме того, локальное тестирование и DevTools для iPhone помогают людям устранить болевые точки тестирования и заметно упростить весь процесс.

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

    Используйте OutSystems с собственной клавиатурой. Наша бесплатная версия навсегда бесплатна.

    Вы только что пролетели несколько часов и теперь безопасно устроились на месте с командой вашего клиента, готовой помочь им устранить неполадки в замечательном приложении, которое они создали с помощью OutSystems. Затем вы понимаете, что они хотят, чтобы вы протестировали его на телефонах iOS. Все, что у вас есть, — это ваш любимый современный ноутбук под управлением Windows.

    Что теперь делать? Во-первых, не паникуйте. Вот что вам нужно знать для устранения неполадок iOS в Windows.

    Что вам нужно

    Как известно каждому хорошему механику (здесь это будет ваша работа), лучший способ починить что-либо начинается с правильного набора инструментов. Для устранения неполадок iOS в Windows ваш набор инструментов должен включать несколько вещей.

    Совок

    После того, как вы убедитесь, что используете версию 3 или более позднюю, установите scoop, выполнив следующую команду в консоли PowerShell:

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

    Дополнительные сведения

    Scoop Extras — это дополнительная корзина, которая позволит вам установить оставшиеся зависимости. Для этого перейдите в консоль PowerShell и выполните:

    Установите Git, чтобы иметь доступ к прокси-серверу отладчика WebKit и адаптеру. В консоли PowerShell выполните следующую команду:

    устранение неполадок iOS в Windows

    iTunes

    Вам потребуется последняя версия iTunes на вашем компьютере. Если вы устанавливаете его, убедитесь, что ваш компьютер обновлен, у вас как минимум Windows 7 и вы используете версию iTunes Store для Microsoft. Это позволяет вам установить соединение с устройством iOS для тестирования, а также получить его уникальный идентификатор устройства — UDID.

    Среда выполнения JavaScript Node.js включает npm, диспетчер пакетов для JavaScript, который позволяет устанавливать адаптер WebKit и libimobile. Следуйте инструкциям по установке, а затем перезагрузите компьютер.

    Прокси-сервер отладки iOS WebKit

    iOS WebKit Debug Proxy позволяет выполнять отладку в iOS, управляя запросами от адаптера. Чтобы установить его, выполните следующую команду в PowerShell:

    библиотека libimobiledevice

    Библиотека libimobiledevice. Это инструмент, который поможет вам взаимодействовать с любым устройством iOS, которое вы используете для отладки. Чтобы установить его, просто зайдите в консоль PowerShell и выполните:

    Удаленная отладка адаптера iOS WebKit

    И, наконец, адаптер Remote Debug iOS WebKit. Это инструмент, который позволяет выполнять отладку iOS/Safari с помощью протокола отладки Google Chrome.

    устранение неполадок iOS в Windows

    Чтобы установить его, откройте консоль PowerShell и установите пакет для адаптера WebKit, выполнив следующую команду:

    Теперь, когда у вас есть готовый набор инструментов, пора запачкать руки.

    Приступим к делу!

    Прежде всего включите удаленную отладку на устройстве iOS, используемом для тестирования. Перейдите в настройки устройства, коснитесь значка Safari и откройте меню «Дополнительно». Включите веб-инспектор.

    устранение неполадок iOS в Windows

    Устранение неполадок с мобильным приложением

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

    Кроме того, ваше приложение должно быть создано в режиме разработки. Чтобы узнать, что нужно сделать для этого, ознакомьтесь с этой статьей.

    Если вы устраняете проблему с пользовательским интерфейсом (связанную с JS или CSS), я рекомендую устранять их, воспроизводя проблему в Safari. Для этого скопируйте ссылку веб-просмотра приложения в браузер устройства iOS. Таким образом, нам не нужны упомянутые сертификаты.

    Если вам нужна отладка помимо пользовательского интерфейса, вы должны на своем компьютере открыть iTunes и оставить его работающим. Это гарантирует связь между вашим ПК и телефоном iOS на протяжении всей операции.

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

    устранение неполадок iOS в Windows

    Затем нажимайте на поле "Серийный номер", пока оно не изменится на код UDID подключенного телефона:

    устранение неполадок iOS в Windows

    Щелкните правой кнопкой мыши строку UDID и выберите "Копировать", чтобы сохранить идентификатор устройства:

    устранение неполадок iOS в Windows

    Скопированный UDID iPhone необходимо прикрепить к профилю подготовки. Узнайте, как здесь.

    Устранение неполадок в веб-приложении

    А как насчет веб-приложений? Ну, они намного проще. Вам просто нужно открыть ссылку на приложение в браузере Safari устройства и начать отладку, как описано в следующем разделе. Легко.

    3, 2, 1, Отладка!

    Теперь, когда у нас все готово, пора приступить к удаленной отладке. Сначала выполните эту строку в консоли PowerShell:

    Обратите внимание, что в некоторых случаях вам может потребоваться попробовать другой номер порта вместо значения по умолчанию 9000. Например, попробуйте 9221 или 9222.

    Теперь у нас есть открытая связь между нашим ПК и нашим Устройством, пришло время:

    1. Откройте URL-адрес веб-приложения в браузере Safari на устройстве или откройте мобильное приложение на устройстве.
    2. Откройте Google Chrome на своем компьютере и в адресной строке введите:
    3. Отображается меню устройства для Chrome DevTools. В нем нажмите «Настроить». и добавьте порт, используемый для отладки:

    Как устранить неполадки iOS в Windows

    В списке Remote Target выберите приложение/ссылку, для которой нужно устранить неполадки, и нажмите ссылку Inspect:

    устранение неполадок iOS в Windows

    Откроется новое окно, и в нем вы сможете увидеть свое приложение в окне Chrome DevTools:

    устранение неполадок iOS в Windows

    Теперь у вас есть доступ к приложению, которое вы отлаживаете; пора веселиться!

    На случай, если он пойдет на юг

    Если Inspect работает неправильно и не обновляет элементы и примененный CSS, моя единственная рекомендация — это самое большое ИТ-клише. Просто попробуйте выключить и снова включить. Отсоедините кабель iPhone, снова подключите его, вернитесь в Chrome и посмотрите, сможете ли вы, наконец, проверить свое приложение.

    Наконец сила и слава!

    Наконец-то вы можете глубоко погрузиться в приложение для iOS и начать поиск этих неприятных и надоедливых ошибок. Вы снова на правильном пути, купите себе несколько ошибок и покажите своему клиенту, кто лучший! Да пребудет с вами слава!

    Читайте также: