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


199

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

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


2
Удаленная отладка теперь может быть выполнена с Safari на Mac. Но если вы разрабатываете для Linux или Windows, вам все равно придется использовать weinre (как указано в ответе gregers).
Dehalion

3
Удаленная отладка с Safari поддерживает только Mobile Safari, а не iOS Chrome.
Мэтт Дженсен

Пожалуйста, посмотрите medium.com/@nikoloza/…
Мачадо

Ответы:


111

Обновить:

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

Новый ответ:

Используйте 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> Личный просмотр> OFF


11
Да, я уже использую это. В заключение! Это отстой, что версия Windows Safari не имеет, хотя.
Hyangelo

5
Я надеюсь, что Chrome скоро включит ту же функцию, чтобы она работала во всех ОС.
Ф Лекшас

49
Да - было бы неплохо, если бы это ответило на заданный вопрос!
Ирэн Кнапп

4
Отключение частного просмотра больше не является обязательным требованием.
Майлз

3
Причина понижения: Вопросы задает Chrome, а не Safari.
NickG

230

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

введите описание изображения здесь

Установить:

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

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

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

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

введите описание изображения здесь


27
Это единственный правильный ответ, все остальные относятся к Safari (прогулка в парке)
Марс Робертсон

2
Очень полезные инструкции! Я просто добавлю, что для установки букмарклета вместо копирования вы можете просто перетащить предоставленную ссылку на закладку «weinre target debug» на панель закладок (сделайте панель инструментов видимой, Ctrl-Shift-Bесли она не видна).
Кай Карвер

Мне нужно было обновить браузер после установки букмарклета, чтобы он заработал.
ooolala

npm install -g weinreне работал для меня. Поэтому мне пришлось запустить его с версией npm install -g weinre@2.0.0-pre-I0Z7U9OV. проверьте последнюю версию здесь npmjs.com/package/weinre .
Vinesh

1
FWIW, weinre в настоящее время не поддерживает shadow dom - он показывает только элементы верхнего уровня и их light dom. Это также не работает для теневого дома, кроме элементов верхнего уровня и их теневого дома (и светлого дома тоже).
Макс Уотерман,

52

Вы не можете напрямую удаленно отлаживать 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.

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь


7
Как проверить iOS (iPhone / iPad) на Windows с помощью Chrome? Есть ли способ для этого?
Surjith SM

@SurjithSM Этот ответ не поможет с Windows, пока вы не можете установить XCode на Windows и создать приложение IOS. Попробуйте вместо этого stackoverflow.com/a/22047495/1737158
Lukas Liesis

Я уже имел опыт работы с github.com/google/ios-webkit-debug-proxy, который является отличным инструментом, и вчера попробовал отладить Google Chrome с помощью эмулятора iOS - это самый потрясающий опыт. Спасибо за # 3
Олег Андреев

10

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


1
Да, узнал об этом после того, как я поднял этот вопрос. Это позор для яблока на самом деле. Я оставил этот вопрос открытым на случай, если кто-то придумал, как это сделать.
Hyangelo

4

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

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

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

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

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


4

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


3

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

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


1
Поддержка веб-просмотра Chrome теоретически реализована через: github.com/RemoteDebug/remotedebug-ios-webkit-adapter, который построен поверх отладочного прокси-сервера iOS. До сих пор у меня был ограниченный успех с этим проектом, но я ожидаю, что он станет лучше.
Мэтт Дженсен

3

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

  1. Просто установите его глобально, используя npm i -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 . См. Https://stackoverflow.com/a/45443203/2073920 для получения подробной информации.

отказ

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


Я выполнил все шаги, но внешний вид моего iPhone не обнаруживается в VorlonJS, работающем на Mac
Амарджит Сингх

2

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

Настройки> Safari> Личный просмотр> OFF


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

14
@basecode Потому что это дополнительный ответ, который должен быть в комментарии.
GusDeCooL

2
@GusDeCooL Понятно, спасибо! Комментарий downvoter, который объясняет это, был бы полезен.
базовый код

0

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

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

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

НТН.


0

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


Adobe Edge Inspect больше не отображается в Adobe Creative Cloud. См. Adobe.com/products/edge-inspect.html .
Рон Инбар

Правда, однако вы все равно можете скачать его с текущей подпиской, несмотря на то, что он больше не разрабатывается. Посмотрите, как это сделать, здесь: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings

Тем не менее, приложение для iOS больше не доступно. Все еще работает на Android, но больше не на iOS: itunes.apple.com/app/id498621426
bg17aw


0

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

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


0

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

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

введите описание изображения здесь

введите описание изображения здесь

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


-2

Откройте 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.


-3

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


Отладка Safari на iOS (не для Chrome, читайте дальше, чтобы узнать больше).

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

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

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

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

DevTools на реальных телефонах, отладка адаптивных сайтов.


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

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

выполнять JavaScript в реальных телефонах, используя devtools


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

Вкладка «Сеть» для проверки запросов


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

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

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

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

Подробнее об этом см. Раздел DevTools на странице «Мобильные функции» .


3
Он попросил отладку Chrome на iOS. Я browserstack клиента и собственный Mac , так отладки Safari на прошивке можно, но хром делает лаг возможности быть debugable удалено
FABS

@fabs У нас есть это в нашей дорожной карте. Кроме того, я упомянул, что он работает только на устройствах Safari - iOS и Chrome для устройств Android :)
Alien

Для проблем верстки это не должно быть проблемой, так как механизм верстки обоих браузеров - это webkit. В сочетании с функцией локального тестирования сервера это не требует дополнительных настроек для отладки localhost.
Тим Вермален

1
Ответ не затрагивает вопрос в любом случае. Хотя Browserstack предоставляет отличный сервис, этот ответ совершенно не по теме.
Мэтт Дженсен
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.