Удаленная отладка iOS

Ответ 1

Update:

Это не лучший ответ, пожалуйста, следуйте советам gregers.

Новый ответ:

Используйте Weinre.

Старый ответ:

Теперь вы можете использовать Safari для удаленной отладки. Но для этого требуется iOS 6.

Вот быстрый перевод http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

• Подключите iDevice через USB с Mac.
• Откройте Safari на вашем Mac и активируйте инструменты dev
• На вашем iDevice: перейдите в настройки > safari > advanced и активируйте веб-инспектора
• Перейдите на любой сайт с помощью iDevice
• На вашем Mac: откройте меню разработчика и выберите сайт из iDevice (его в верхнем меню Safari).

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

Настройки > Safari > Частный просмотp > ВЫКЛ

Ответ 2

Выбранный ответ предназначен только для Safari. В настоящий момент невозможно выполнить реальную удаленную отладку в Chrome на iOS, но, как и в большинстве мобильных браузеров, вы можете использовать WeInRe для некоторой простой отладки. Он немного работает над настройкой, но позволяет вам проверять DOM, видеть стиль, изменять DOM и играть с консолью.

Для настройки:

• Установите nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Откройте http://{wifi-ip-address}: 8080/и скопируйте целевой код script
• Вставьте тег script на свою страницу (или используйте букмарклет)
• Нажмите ссылку на пользовательский интерфейс отладочного клиента (http://{wifi-ip-address}: 8080/client/# anonymous)
• Когда вы получаете зеленую строку под кликами, браузер подключен

Этот букмарклет является немного более сложным для установки. Это проще всего, если у вас включена синхронизация по закладкам для настольных и мобильных Chrome. Скопируйте URL-адрес букмарклета с локального сервера weinre (как указано выше). К сожалению, он не работает, потому что он неправильно закодирован. Откройте консоль JavaScript и введите:

copy(encodeURI('')); // paste bookmarklet inside quotes

Теперь вы должны иметь букмарклет с URL-адресами в вашем буфере обмена. Вставьте его в новую закладку в разделе "Мобильные закладки". Назовите это weinre или что-то простое. Он должен быть синхронизирован с вашим мобильным телефоном довольно быстро, поэтому загрузите страницу, которую вы хотите проверить. Затем введите имя закладки в url-bar, и вы должны увидеть букмарклет как предложение автозаполнения. Щелкните по нему, чтобы запустить код букмарклета:)

Ответ 3

Вы не можете напрямую удаленно отлаживать Chrome на iOS в настоящее время. Он использует uiWebView, который может немного отличаться от Mobile Safari.

У вас есть несколько вариантов.

Вариант 1. Удаленная отладка Mobile Safari с помощью инспектора Safari. Если ваша проблема воспроизводится в Mobile Safari, это, безусловно, лучший путь. На самом деле, проходить симулятор iOS еще проще.

Вариант 2: используйте Weinre для упрощенного процесса отладки. Weinre не имеет много функций, но иногда это достаточно хорошо.

Вариант 3: Удаленная отладка правильного uiWebView, который работает так же.

Здесь лучший способ сделать это. Вам нужно будет установить XCode.

1. Перейдите на github.com/paulirish/iOS-WebView-App и "Скачать Zip" или клонируйте.
2. Откройте XCode, откройте существующий проект и выберите проект, который вы только что загрузили.
3. Откройте WebViewAppDelegate.m и измените urlString на URL, который вы хотите протестировать.
4. Запустите приложение в iOS Simulator.
5. Откройте Safari, откройте меню "Разработка", выберите "Симулятор iOS" и выберите свое веб-представление.
6. Теперь Safari Inspector будет проверять ваш uiWebView.

Ответ 4

Насколько я понимаю, Google Chrome использует iOS UIWebView, а не полномасштабную реализацию Chrome, как Android-аналог.

Ответ 5

Многие удаленные консоли работают нормально. http://farjs.com - это мой проект, и я смог успешно отладить проблемы, специфичные для Crome iOS, и не выполнялся в сафари, используя его. (и, возможно, все другие мобильные браузеры)

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

Вместо этого вы можете открыть одну вкладку на странице, которую вы будете отлаживать, а другую на farjs.com, а затем нажать "букмарклет"

Скопируйте JS-код букмарклета, вернитесь к первой вкладке со страницей, которую нужно отладить, и вставьте код букмарклета в строку местоположения.

Последний шаг - прокрутить до начала строки местоположения и добавить "javascript:", так как Chrome удалит его.

Ответ 6

Я рекомендую Vorlon, работает как weinre. Мне нравится пользовательский интерфейс Vorlon, и он поддерживает SSL, мое приложение находится в HTTPS, я пробовал использовать ngrok, ghostlab и vorlon, только ворлон отлично работает.

Ответ 7

Я не пробовал, но прокси-сервер iOS WebKit (ios_webkit_debug_proxy/iwdp) предположительно позволяет удаленно отлаживать UIWebView. Из README.md

ios_webkit_debug_proxy (aka iwdp) позволяет разработчикам проверять MobileSafari и UIWebViews на реальных и смоделированных устройствах iOS через пользовательский интерфейс Chrome DevTools и протокол удаленной отладки Chrome. DevTools запросы транслируются в службу Apple Remote Web Inspector вызовы.

Ответ 8

Вам также необходимо отключить "Частный просмотр".

Настройки > Safari > Частный просмотp > ВЫКЛ

Ответ 9

Vorlon.JS можно использовать для удаленной отладки iOS или любого другого клиента.

1. Просто установите его глобально, используя npm я -g vorlon
2. Запустите сервер используя vorlon
3. Когда сервер запущен, откройте http://localhost: 1337 в браузере, чтобы увидеть панель управления Vorlon.JS.
4. Последний шаг - включить Vorlon.JS, добавив тег тега в свое приложение:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Все подключенные клиенты, например iPhone, Android, станут доступны в списке клиентов на панели управления Vorlon.JS .

Обратите внимание, что этот подход также можно использовать для отладки приложений, не запущенных на локальном хосте, с помощью ngrok. См. fooobar.com/questions/39367/... для получения подробной информации.

отказ

Я просто пользователь, и я не связан с Vorlon.JS и ngrok

Ответ 10

Даже я ищу ту же функцию, и на сегодняшний день ее еще предстоит реализовать. Однако я могу представить два варианта:

• Я заметил, что поведение Chrome и Safari совершенно одинаково; Chrome даже поддерживает гироскоп и другие связанные события, которые поддерживаются Safari. В настоящее время я отлаживаю свое веб-приложение, включив консоль отладки в Safari (через настройки- > Safari).

• Также попробуйте Adobe Shadow, который позволяет удаленно отлаживать/проверять и синхронизировать.

НТН.

Ответ 11

Adobe Edge Inspect (https://creative.adobe.com/products/inspect) - это еще один способ отладки всех ваших мобильных устройств IOS и Android (без Windows Phone, хотя). Он использует weinre для удаленного контроля/изменения DOM. Это не самый быстрый метод, но он работает в Windows.

Ответ 12

В Chromium есть открытая ошибка: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

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

Ответ 13

Я использую remotedebug-ios-webkit-adapter, у меня хорошо работает с IOS и отладчиком, открытым в Chrome на Windows 10.

Буду рад, если кому-нибудь это поможет Ссылка

Ответ 14

Примечание: я не имею никакого отношения к создателям Ghostlab Vanamco.

Для меня было важно иметь возможность отлаживать специфичные для Chrome проблемы, поэтому я решил найти что-то, что могло бы помочь мне в этом. В итоге я с радостью бросил свои деньги в Ghostlab 3. Я могу тестировать мобильные браузеры Chrome и Safari, как если бы я просматривал их на своем рабочем столе. Это просто дает мне адрес локальной сети для использования на любом устройстве, которое я хотел бы отлаживать. Каждое приложение, использующее этот адрес, появится в списке в Ghostlab.

Настоятельно рекомендуется.

Ответ 15

Отказ от ответственности: я работаю в браузере. ^{[Подтверждено], разрешено ли размещать это сообщение (Могу ли я предложить продукт компании, работающей в?)}

Отладка Safari на iOS (не для Chrome на данный момент, читайте дальше для более подробной информации.)

Как это работает?

• Вам нужно запустить сеанс на любом реальном устройстве (есть эмуляторы, но вам нужно запустить сеанс на реальном устройстве) на BrowserStack, скажем, iPhone 6S - Safari/Chrome (пока нет devtools для Chrome, но он включен наша дорожная карта)
• Введите URL-адрес
• Вы можете запустить DevTools для проверки веб-страницы, открытой на удаленном устройстве BrowserStacks. Я поделился экранами так же, как показано ниже.

Использование DevTools с реальными телефонами

Наведите указатель мыши на элементы, отредактируйте HTML, CSS, как и рабочий стол браузера devtools.

Выполнение JavaScript в реальном телефоне с помощью DevTools

Перейдите на вкладку Console, выполните код JavaScript, проверьте вывод console.log() и так далее...

Вкладка "Сеть", проверить заголовки запросов, ответ и т.д.

Поддержка DevTools на BrowserStack?

• DevTools доступны по адресу:

  • Real Devices - iOS - Safari (DevTools для iOS Chrome находится в нашей дорожной карте)
  • Real Devices - Android - Chrome (на данный момент на устройствах Android доступен только Chrome)

• Для браузера клиента должен быть Chrome или Firefox. Это означает, что вам нужно использовать браузер Chrome или Firefox в MacOSX или Windows для использования DevTools для браузера BrowserStack.

Примечание. Вам нужно купить план тестирования на всех реальных устройствах, как бесплатный пользователь, вы получите пару реальных Android-устройств (включая планшеты) и пару настоящих iOS-устройств (включая планшеты). Также, подчеркивая слово "настоящие устройства", поскольку они также предоставляют эмуляторы.

Подробнее об этом см. в разделе DevTools на странице Страницы мобильных функций.

Ответ 16

Откройте Safari Desktop iOS

Разработка → Режим адаптивного дизайна

Нажмите "Другое" в устройстве

Вставить это: Mozilla/5.0 (iPad, CPU OS 10_2_1, как Mac OS X) AppleWebKit/602.1.50 (KHTML, например, Gecko) CriOS/56.0.2924.79 Mobile/14D27 Safari/602.1

Используйте инструменты проверки Safari.