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

с недавним выпуском Chrome для iOS мне было интересно, Как включить удаленную отладку для Chrome iOS?

Update: с выпуском iOS 6 удаленная отладка теперь может быть выполнена с помощью сафари.

16 ответов


обновление:

Это не лучший ответ больше, пожалуйста грегерс'.

ответ:

использовать Weinre.

ответ:

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

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

  1. подключите iDevice через USB к компьютеру Mac
  2. откройте Safari на вашем Mac и активируйте инструменты разработки
  3. на вашем iDevice: перейдите в Настройки > safari > дополнительно и активируйте веб-инспектор
  4. перейти на любой веб-сайт с iDevice
  5. на вашем Mac: откройте меню разработчика и выберите сайт из вашего iDevice (его в верхней части Safari Меню)

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

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


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

enter image description here

настройки:

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

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

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

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

enter image description here


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

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

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

Вариант 2: используйте Weinre для slimmed вниз отладки. 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.

enter image description here

enter image description here

enter image description here


насколько я понимаю, 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 UI и протокол удаленной отладки 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 enter image description here

обратите внимание, что этот подход также может использоваться для отладки приложений, не работающих на localhost с помощью 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, которая позволяет удаленная отладка / проверка и синхронизация.

HTH.


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


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

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


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

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

enter image description here

enter image description here

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


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

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


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


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

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

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

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

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

DevTools on real phones, debugging responsive websites.


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

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

execute JavaScript in real phones using devtools


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

Network tab to check requests


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

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

    • реальные устройства-iOS-Safari (DevTools для iOS Chrome находится на нашей Дорожной карте)
    • реальные устройства-Android-Chrome (только Chrome доступен на устройствах Android сейчас)
  • клиентский браузер должен быть Chrome или Firefox. Это означает, что вам нужно использовать браузер Chrome или Firefox на MacOSX или Windows, чтобы использовать BrowserStack Real Device Инструменты разработчика.

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

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


откройте Safari Desktop iOS

Разработка - > Адаптивный Режим Проектирования

нажмите "другое" под устройством

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

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