Отладка ipad сафари с ПК

Ответ 1

Обновление 2018 года:

Начиная с оригинального сообщения, сообщение в блоге умерло & Telerik App Builder больше не поддерживается и больше не предлагается. Добавление этого обновления для информирования читателей в случае, если они не читают комментарии пользователей, которые следуют за этим постом ответа. Что касается поста в блоге, для тех, кто все еще заинтересован, здесь есть веб-кешированная копия. Что касается блога, я думаю, что компания, с которой блог был с тех пор закрыта.

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

Оригинальный ответ

Вы можете попробовать вариант использования Telerik AppBuilder (клиент Windows) в качестве замены в Windows для отладчика Safari на Mac при удаленной отладке. Там есть хороший пост в блоге о том, как это сделать, по ссылке ниже. Я бы предпочел не публиковать информацию, так как есть скриншоты и много текста. Но, по сути, вы устанавливаете приложение, открываете его, подключаете устройство через USB, затем вы можете найти его в приложении и открыть для него инструменты разработчика/отладчик. Для непубличных веб-сайтов вам придется открыть порт 80 с некоторыми настройками брандмауэра, описанными в посте.

http://blog.falafel.com/Blogs/josh-eastburn/2014/03/04/ios-web-inspector-on-windows-with-telerik-appbuilder

Средство требует лицензии, или вы можете использовать пробную версию, которая впоследствии становится базовой версией. Я думаю, что базовая версия все еще позволит вам делать отладку. Я собираюсь попробовать это сам.

Вы также можете попробовать эти приложения для iOS, вы можете найти их в магазине приложений iTunes. Они предоставляют вам встроенную функцию инструментов разработчика (прямо на iOS без удаленной отладки), которую мобильный Safari не предлагает.

MIH Tool - базовое издание https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8

HTTPWatch Basic https://itunes.apple.com/us/app/httpwatch-basic-http-sniffer/id658886056?mt=8

Я попробовал их, и они, по крайней мере, лучше, чем мобильный Safari, который вы получаете на iOS, если только вам не нужна целевая совместимость с мобильным Safari. Я предполагаю, что про/платные версии этих приложений дают вам больше/лучше функций.

Ответ 2

Обновление октября 2019 года

Это решение не работает для IOS 12+ (ресурс 1, ресурс 2).

Обновлено и протестировано 24/6/2017

Использование Chrome в Windows 8 и более поздних версиях:

• Загрузите и установите узел

• Скачайте и установите ITunes и подключите его к вашему устройству. (На вашем iPad должно появиться всплывающее окно, чтобы получить авторизацию) , Обязательно включите веб-инспектор на своем iPad

• Загрузите и установите адаптер удаленного веб-набора

Использование Powershell (от имени администратора):

npm install remotedebug-ios-webkit-adapter -g

• Выполните адаптер:

Использование Powershell (в качестве администратора):

remotedebug_ios_webkit_adapter --port=9000

Вы должны получить похожий вывод:

C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...

• Откройте Chrome и перейдите по следующей ссылке:

chrome://inspect/#devices

• Нажмите "Настроить" рядом с "Обнаружение сетевых целей" и добавьте следующее: локальный: 9000

Убедитесь, что веб-страница, которую вы хотите отладить, открыта в Safari, вы должны увидеть ее на странице инспектора Chrome в разделе Удаленная цель

Дополнительный шаг для iOS 11 Благодаря @skaurus

Ответ 3

См. ответ Lemmy4555, чтобы узнать, как проще всего выполнять отладку на компьютере под управлением Windows 8+ с iOS 9+. Я обновил свое сообщение в блоге, используя информацию из этого ответа и других источников, а также записал скриншот. Приведенный ниже метод все еще должен работать для iOS 8 и ниже, если это необходимо.

На самом деле существует довольно простой способ отладки веб-сайта в Safari на iOS с помощью Firefox на компьютере с Windows.

ПРИМЕЧАНИЕ: Райан написал в комментариях ниже, что это может работать только на iOS 8 и ниже. Я не могу подтвердить, но имейте в виду.

Я написал подробное сообщение в блоге об этом, но вот основные моменты:

1. Установите iTunes, чтобы получить приложения "Поддержка мобильных устройств Apple" и "Поддержка приложений Apple", которые поставляются с ним. (если хотите, удалите iTunes позже)
2. Подключите ваше устройство iOS через USB.
3. Включить веб-инспектор на iOS (доступно на iOS 6 и более поздних версиях).
4. Откройте Safari на своем устройстве iOS и перейдите на веб-сайт.
5. Откройте Firefox на вашем компьютере с Windows и нажмите Shift + F8, чтобы открыть WebIDE, который должен включать необходимое дополнение Valance, если вы используете Firefox Developer Edition (любая версия) или Firefox 37 и более поздние версии (любой канал).
6. По какой-то причине я не смог подключить его к своему устройству iOS, пока не загрузил программу ios-webkit-debug-proxy-win32 и не запустил ее. Он открывает пустую командную строку, но после того, как я вернулся в WebIDE после его открытия, я отключился, затем снова подключился и увидел отладочную информацию для веб-сайта, который я открыл в Safari. Возможно, вам не нужно этого делать, поскольку другому пользователю просто нужно было добавить исключение в свой брандмауэр, а затем отключить/восстановить соединение, и это сработало.

Доступная отладочная информация не такая исчерпывающая, как в Chrome Developer Tools (в частности, нет вкладки "Сеть"), но мне было достаточно, чтобы я мог видеть, что происходит в консоли.

Ответ 4

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

VConsole

Это JavaScript, который вы можете внедрить на свои страницы, который перезапишет всю исходную консольную информацию и покажет ее как наложение поверх содержимого вашей страницы с уровнем детализации, почти равным уровню Google Chrome Developer Tools.

Хорошо работает в iOS Safari, а также в других мобильных браузерах - до тех пор, пока в браузере включен JavaScript.

Как установить: https://www.npmjs.com/package/vconsole

Вам понадобятся инструменты NPM для его установки, но на самом деле не обязательно использовать NPM для создания вашего проекта. Вы можете просто установить VConsole где-нибудь в отдельной папке и просто скопировать и вставить vconsole.min.js из нее.

После того, как вы добавите его на свою страницу, он будет выглядеть следующим образом:

<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>

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

Очень аккуратно!

Конечно, он не дает вам возможности выбрать элемент, посмотреть рассчитанный CSS и т.д., Но если вы ищете вывод консоли и какой-то сетевой отчет, этот действительно прост в использовании.

Ответ 5

Я использую PrePros для предварительной обработки CSS и имеет встроенный сервер для отладки мобильных устройств и веб-инспектора. Но это полезно только для локальных сайтов даже...

Ответ 6

По моему опыту, это часто не проблема с мобильным Safari, но Safari в целом. В этих случаях это может помочь попробовать обычное Safari (для Windows) и посмотреть, появляются ли там ошибки. Если это так, гораздо проще отладить что-то таким образом.

Ответ 7

Я не пробовал это на ПК, но вы должны иметь возможность перейти на http://[DEVICE_IP_ADDRESS]: 9999 для отладки.