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

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

настройки:

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

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

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

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

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

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

Вариант 1: удаленной отладки мобильных устройств, используя инспектор сафари. если ваша проблема воспроизводится в мобильном 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.
5. откройте Safari, откройте разработки Выберите iOS Simulator и выберите свой webview.
6. - инспектор Safari теперь будет проверять ваш uiWebView.

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

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

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

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

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

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

Я не пробовал, но iOS WebKit debug proxy (ios_webkit_debug_proxy / iwdp) предположительно позволяет удаленно отлаживать UIWebView. С самого начала README.md

ios_webkit_debug_proxy (он же iwdp) позволяет разработчикам проверять Любом случае и UIWebViews on реальные и сымитированные приборы iOS через интерфейс Chrome DevTools и протокол удаленной отладки Chrome. Инструменты разработчика запросы переводятся на удаленный веб-сервис компании Apple инспектор звонки.

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

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

Настройки > Safari > приватный просмотр > выкл

Ворлонцу.JS лучше всего подходит для удаленной отладки iOS или любого другого клиента.

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

обратите внимание, что этот подход также может быть использован для отладки приложений, не работающих на локальном хосте с помощью ngrok. Смотрите https://stackoverflow.com/a/45443203/2073920 ибо подробности

ссылки

http://vorlonjs.com

https://ngrok.com

отказ от ответственности

Я просто пользователь и я не связан с Ворлонцу.JS и ngrok

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

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

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

НТН.

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

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

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

Примечание: у меня нет никакой связи с создателями Ghostlab Vanamco вообще.

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

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

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

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

отказ от ответственности: я работаю в BrowserStack. ^{[подтверждено]что ли я могу опубликовать это (могу ли я предложить продукт компании, над которым я работаю?)}

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

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

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

---

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

наведите курсор на элементы, редактировать HTML, CSS так же, как desktop browser devtools работа.

---

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

переключатель Console tab, выполнить код JavaScript, проверить console.log() выход и так далее...

---

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

---

поддержка инструментов разработчика ПО BrowserStack?

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

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

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

Примечание: вам нужно купить план для тестирования на всех реальных устройствах, как бесплатный пользователь, вы получите пару реальных устройств Android (включая планшеты) и пару реальных устройств iOS (включая планшеты). Кроме того, подчеркивая слово Реальных Устройств потому что они также предоставляют эмуляторы.

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

открыть 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 inspect.