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

Question

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

Обновление: С выходом IOS 6, удаленная отладка теперь может быть сделано с Safari.

Answer 1

Update:

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

Новый ответ:

Использование Weinre.

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

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

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

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

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

Настройки> Safari> инкогнито> OFF

Answer 2

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

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

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

HTH.

Answer 3

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

Answer 4

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

Настройки> Safari> инкогнито> OFF

Answer 5

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

Для установки:

• Установка nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Открыть HTTP: // {WiFi-IP-адрес}: 8080/и скопировать цель код сценария
• Вставьте тег сценария на свою страницу (Или использовать букмарклет)
• Нажмите на ссылку пользователя отладки интерфейса клиента (HTTP: // {WiFi-IP-адрес}: 8080/клиент/# анонимным)
• Когда вы зеленую линию под Клиенты Браузер подключен

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

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

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

Answer 6

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

Answer 7

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

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

Вариант 1: Remote-debug Mobile Safari using Safari's inspector. Если ваша проблема воспроизводится в Mobile Safari, это, безусловно, лучший способ. Фактически, пройти через iOS-симулятор еще проще.

Вариант 2: Use Weinre for a slimmed down debugging experience. У Вайнра нет особых возможностей, но иногда это достаточно хорошо.

Вариант 3: Удаленная отладка надлежащего uiWebView, который функционирует одинаково.

Вот лучший способ для этого. Вам нужно будет install XCode.

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

Answer 8

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

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

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

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

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

Answer 9

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

The ios_webkit_debug_proxy (ака iwdp) позволяет разработчикам проверять MobileSafari и UIWebViews на реальных и смоделированные IOS устройств через Протокол удаленной отладки Chrome DevTools UI и Chrome , Запросы DevTools транслируются в службу удаленных веб-инспекторов Apple .

Answer 10

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

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

Answer 11

Отказ: Я работаю в браузере. ^{[подтверждено], что разрешено ли этот пост (Can I suggest a product of the company am working at?)}

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

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

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

---

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

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

---

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

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

---

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

---

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

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

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

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

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

Подробнее об этом, пожалуйста, обратитесь к разделу DevTools, раздел Mobile Features page.

Answer 12

Открыть Safari Desktop IOS

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

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

Вставить следующим образом: Mozilla/5.0 (IPAD, ЦПУ OS 10_2_1 как Mac OS X) AppleWebKit /602.1.50 (KHTML, например, Gecko) CriOS/56.0.2924.79 Mobile/14D27 Safari/602.1

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

Answer 13

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

Answer 14

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

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

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

Ссылки

http://vorlonjs.com

https://ngrok.com

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

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

Answer 15

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

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