удаленная отладка iOS
с недавним выпуском Chrome для iOS мне было интересно, Как включить удаленную отладку для Chrome iOS?
Update: с выпуском iOS 6 удаленная отладка теперь может быть выполнена с помощью сафари.
16 ответов
обновление:
Это не лучший ответ больше, пожалуйста грегерс'.
ответ:
использовать Weinre.
ответ:
теперь вы можете использовать Safari для удаленной отладки. Но для этого требуется iOS 6.
вот быстрый перевод http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector
- подключите iDevice через USB к компьютеру Mac
- откройте Safari на вашем Mac и активируйте инструменты разработки
- на вашем iDevice: перейдите в Настройки > safari > дополнительно и активируйте веб-инспектор
- перейти на любой веб-сайт с iDevice
- на вашем Mac: откройте меню разработчика и выберите сайт из вашего iDevice (его в верхней части Safari Меню)
Как указал Симонс ответ нужно отключить частный просмотр, чтобы сделать удаленную отладку работы.
Настройки > Safari > Частный просмотр > выкл
выбранный ответ предназначен только для Safari. На данный момент невозможно выполнить реальную удаленную отладку в Chrome на iOS, но, как и в большинстве мобильных браузеров, вы можете использовать WeInRe для простой отладки. Это немного Работа для настройки, но позволяет вам проверять DOM, видеть стиль, изменять DOM и играть с консолью.
настройки:
- установить 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-строке, и вы должны увидеть букмарклет как автозаполнение-предложение. Щелкните его, чтобы запустить код букмарклета :)
вы не можете напрямую удаленно отлаживать Chrome на iOS в настоящее время. Он использует uiWebView, который может действовать тонко отличается от мобильного Safari.
у вас есть несколько вариантов.
Вариант 1: удаленная отладка мобильного Safari с помощью инспектора Safari. если проблема воспроизводится в мобильном сафари, это, безусловно, лучший способ пойти. На самом деле, пройти через симулятор iOS еще проще.
Вариант 2: используйте Weinre для slimmed вниз отладки. Weinre не имеет много функций, но иногда это достаточно хорошо.
Вариант 3: удаленная отладка правильного uiWebView, который функционирует одинаково.
вот лучший способ сделать это. Вам нужно будет установить XCode.
- на github.com/paulirish/iOS-WebView-App и "скачать zip" или Клон.
- откройте XCode, откройте существующий проект и выберите проект, который вы только что скачали.
- Открыть WebViewAppDelegate.m и изменить
urlString
должен быть URL, который вы хотите проверить. - запустите приложение в симуляторе iOS.
- открыть Safari, открыть разработки Выберите iOS Simulator и выберите свой webview.
- - инспектор 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 UI и протокол удаленной отладки Chrome. Инструменты разработчика запросы переводятся в Службу удаленного веб-инспектора Apple звонки.
рекомендую Ворлонцу, работает как weinre. Мне нравится пользовательский интерфейс Ворлона, и он поддерживает протокол SSL, мое приложение находится в HTTPS, я пробовал weinre с ngrok, ghostlab и vorlon, только vorlon работает нормально.
Ворлонцу.JS лучше всего подходит для удаленной отладки iOS или любого другого клиента.
- просто установите его глобально, используя
npm i -g vorlon
- запустить сервер с помощью
vorlon
- С запущенным сервером откройте http://localhost:1337 в вашем браузере, чтобы увидеть Ворлонцу.JS dashboard
- последний шаг-включить Ворлон.JS, добавив этот тег скрипта в свое приложение:
<script src="http://<yourExternalIP>:1337/vorlon.js"></script>
- все подключенные клиенты, например iPhone, Android будет стать доступным в списке клиентов на Ворлоне.Приборная панель JS
обратите внимание, что этот подход также может использоваться для отладки приложений, не работающих на localhost с помощью ngrok. См.https://stackoverflow.com/a/45443203/2073920 для подробности
ссылки
отказ от ответственности
Я просто пользователь и я не связан с Ворлонцу.JS и ngrok
даже я ищу ту же функцию, и на сегодняшний день ее еще предстоит реализовать. Я могу думать о двух вариантах, однако,
Я заметил, что поведение Chrome и Safari совершенно идентичны; Chrome даже поддерживает гироскоп и другие связанные события, которые поддерживаются Safari. В настоящее время я отлаживаю свое веб-приложение, включив консоль отладки в Safari (через Настройки - >Safari)
также попробуйте 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.
настоятельно рекомендуется.
Я использую 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 работа.
выполнение JavaScript в реальном телефоне с помощью DevTools
переключатель Console
tab, выполнить код JavaScript, проверить console.log()
выход и так далее...
вкладка сеть, проверьте заголовки запросов, ответ и так далее...
поддержка 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.