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

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

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

 Machado06 сент. 2018 г., 16:12
Пожалуйста, взглянитеmedium.com/@nikoloza/…
 Matt Jensen14 мар. 2018 г., 21:03
Удаленная отладка с Safari поддерживает только Mobile Safari, а не iOS Chrome.
 Dehalion02 февр. 2015 г., 16:36
Удаленная отладка теперь может быть выполнена с Safari на Mac. Но если вы разрабатываете для Linux или Windows, вам все равно придется использовать weinre (как указано в ответе gregers).

Ответы на вопрос(15)

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

 Hyangelo20 июл. 2012 г., 15:05
Да, узнал об этом после того, как я поднял этот вопрос. Это позор для яблока на самом деле. Я оставил этот вопрос открытым из-за вероятности того, что кто-то придумал, как это сделать.

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

enter image description here

Установить:

Install nodejs npm install -g weinre weinre --boundHost -all- Open http://{wifi-ip-address}:8080/ and copy the target script code Paste the script tag into your page (or use the bookmarklet) Click on the link to the debug client user interface (http://{wifi-ip-address}:8080/client/#anonymous) When you get a green line under Clients the browser is connected

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

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

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

enter image description here

 04 мар. 2014 г., 01:13
Это единственный правильный ответ, все остальное относится к сафари (прогулка в парке)
 07 янв. 2016 г., 12:45
npm install -g weinre не работал для меня. Поэтому мне пришлось запустить его с версиейnpm install -g [email protected], проверьте последнюю версию здесьnpmjs.com/package/weinre.
 03 мая 2014 г., 04:12
Очень полезные инструкции! Я просто добавлю, что для установки букмарклета вместо копирования можно просто перетащить предоставленную «weinre target debug». ссылка на закладку на панель инструментов закладок (сделайте панель инструментов видимойCtrl-Shift-B если он не виден).
 27 янв. 2016 г., 21:23
Ваш телефон и компьютер должны быть в одной сети? Я заметил, что 4-й пункт маркирует Wi-Fi
 11 мар. 2015 г., 16:17
Мне нужно было обновить браузер после установки букмарклета, чтобы он заработал.

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

 04 мая 2016 г., 17:54
Adobe Edge Inspect больше не отображается в Adobe Creative Cloud. Увидетьadobe.com/products/edge-inspect.html.
 06 мая 2016 г., 22:54
Правда, однако вы все равно можете скачать его с текущей подпиской, несмотря на то, что он больше не разрабатывается. Посмотрите, как это сделать здесь:helpx.adobe.com/creative-cloud/kb/…
 16 авг. 2016 г., 20:54
Тем не менее, приложение для iOS больше не доступно. Все еще работает на Android, но больше не на iOS:itunes.apple.com/app/id498621426

Отладочный прокси-сервер iOS WebKit (ios_webkit_debug_proxy / iwdp) предположительно позволяет удаленно отлаживать UIWebView. С README.md

The ios_webkit_debug_proxy (aka iwdp) allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the Chrome DevTools UI and Chrome Remote Debugging Protocol. DevTools requests are translated into Apple's Remote Web Inspector service calls.

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

емя. Он использует uiWebView, который может немного отличаться от Mobile Safari.

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

Option 1: Удаленная отладка Mobile Safari с использованием инспектора Safari. Если ваша проблема воспроизводится в Mobile Safari, это, безусловно, лучший путь. На самом деле, проходить симулятор iOS еще проще.

Option 2: Используйте Weinre для облегченного процесса отладки.  У Weinre не так много функций, но иногда это достаточно хорошо.

Option 3: Remote debug a proper uiWebView that functions the same.

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

Go to github.com/paulirish/iOS-WebView-App and "Download Zip" or clone. Open XCode, open existing project, and choose the project you just downloaded. Open WebViewAppDelegate.m and change the urlString to be the URL you want to test. Run the app in the iOS Simulator. Open Safari, Open the Develop ,Menu, Choose iOS Simulator and select your webview. Safari Inspector will now be inspecting your uiWebView.

enter image description here

enter image description here

enter image description here

 15 мар. 2017 г., 09:38
Я уже имел опыт работы сgithub.com/google/ios-webkit-debug-proxy это потрясающий инструмент, а вчера попробовал отладку Google Chrome с помощью эмулятора iOS - это самый потрясающий опыт. Спасибо за # 3
 26 февр. 2017 г., 00:40
@SurjithSM Этот ответ не поможет с окнами, пока вы не можете установить XCode на окна и создать приложение ios. Попробуйте это вместоstackoverflow.com/a/22047495/1737158
 10 мар. 2015 г., 17:37
Как проверить iOS (iPhone / iPad) на Windows с помощью Chrome? Есть ли способ для этого?

[Confirmed]that whether am allowed to post this (Can I suggest a product of the company am working at?)


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

How this works?

You need to start a session on any real device (there are emulators but you need to start a session on a real device) on BrowserStack, say iPhone 6S - Safari / Chrome(no devtools for Chrome yet, but it is on our Roadmap) Type in the URL You can trigger DevTools to inspect the webpage opened on the BrowserStacks remote device. I've shared the screens for the same below.

Using DevTools with Real Phones

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

DevTools on real phones, debugging responsive websites.

Executing JavaScript in real phone using DevTools

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

execute JavaScript in real phones using devtools

Network tab, check request headers, response and so on...

Network tab to check requests

Support for DevTools on BrowserStack?

DevTools are available on :

Real Devices - iOS - Safari (DevTools for iOS Chrome is on our Roadmap) Real Devices - Android - Chrome (Only Chrome is available on Android devices for now)

Client browser needs to be Chrome or Firefox. That means you need to use Chrome or Firefox browser on MacOSX or Windows to use BrowserStack Real Device DevTools.

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

Подробнее об этом, пожалуйста, обратитесь кDevTools раздел наСтраница мобильных функций.

 14 мар. 2018 г., 20:52
Ответ не затрагивает вопрос в любом случае. Хотя Browserstack предоставляет отличный сервис, этот ответ совершенно не по теме.
 12 янв. 2017 г., 11:31
@fabs У нас есть это в нашей дорожной карте. Также я упоминал, что он работает только на устройствах Safari - iOS и Chrome для устройств Android :)
 12 янв. 2017 г., 11:24
Он попросил отладку Chrome на iOS. Я - клиент стека браузеров и владею Mac, поэтому отладка Safari на iOS возможна, но Chrome не дает возможности удаленно отлаживаться
 18 апр. 2017 г., 17:44
В случае проблем с макетом это не должно быть проблемой, поскольку механизм компоновки обоих браузеров представляет собой webkit. В сочетании сLocal Server Testing Эта функция не требует каких-либо дополнительных настроек для отладки localhost.

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

I noticed that the behavior of Chrome and Safari are quite identical; Chrome even supports the Gyroscope and other related events which are supported by Safari. I am currently debugging my Web App by enabling the debug console on Safari (Through Settings->Safari)

Also try Adobe Shadow, which allows remote debugging/inspection and Sync.

НТН.

Решение Вопроса

Update:

Этоnot лучший ответ, пожалуйста, следуйтеGregers& APOS; совет.

New answer:

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

Old answer:

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

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

Connect your iDevice via USB with your Mac Open Safari on your Mac and activate the dev tools On your iDevice: go to settings > safari > advanced and activate the web inspector Go to any website with your iDevice On your Mac: Open the developer menu and chose the site from your iDevice (its at the top Safari Menu)

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

Настройки & gt; Safari & gt; Приватный просмотр & gt; OFF

 27 сент. 2012 г., 15:17
Я надеюсь, что Chrome скоро включит ту же функцию, чтобы она работала во всех ОС.
 09 окт. 2013 г., 21:40
Для iOS 7 вам необходимо установить Safari 6.1, чтобы использовать удаленную отладку, которая сейчас доступна только для разработчиков и требует как минимум OS X 10.7:developer.apple.com/downloads/index.action?name=Safari%206.1
 25 июл. 2014 г., 00:18
Отключение приватного просмотра больше не является обязательным требованием.
 15 нояб. 2013 г., 20:57
Да, было бы неплохо, если бы это ответило на заданный вопрос!
 Hyangelo26 сент. 2012 г., 20:05
Да, я уже использую этот. В заключение! Это отстой, что версия Windows Safari не имеет, хотя.

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

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

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

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

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

угого клиента.

Just install it globally using npm i -g vorlon Start server using vorlon With the server is running, open http://localhost:1337 in your browser to see the Vorlon.JS dashboard The last step is to enable Vorlon.JS by adding this script tag to your app:
<script src="http://<yourExternalIP>:1337/vorlon.js"></script> All connected clients e.g. iPhone, Android will become available in client list on Vorlon.JS dashboard enter image description here

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

References

http://vorlonjs.com

https://ngrok.com

Disclaimer

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

 06 авг. 2017 г., 14:04
пожалуйстаdon't post identical answers to multiple questions, Отправьте один хороший ответ, затем проголосуйте / пометьте, чтобы закрыть другие вопросы как дубликаты. Если вопрос не является дубликатом,tailor your answers to the question.

Разработать - & gt; Адаптивный режим дизайна

Нажмите & quot; Другое & quot; под устройством

Вставьте это: 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.

https://bugs.chromium.org/p/chromium/issues/detail?id=584905

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

Настройки & gt; Safari & gt; Приватный просмотр & gt; OFF

 14 нояб. 2013 г., 15:23
не уверен, почему госзакупок downvote этот ответ. приватный просмотр действительно должен быть отключен, чтобы разрешить удаленную отладку.
 19 дек. 2013 г., 07:07
@basecode Потому что это дополнительный ответ, который должен быть в комментарии.
 19 дек. 2013 г., 10:01
@GusDeCooL Понятно, спасибо! Комментарий downvoter, который объясняет это, был бы полезен.
 25 июл. 2014 г., 00:18
Больше не правда.

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

у меня хорошо работает с IOS и отладчиком, открытым в Chrome на Windows 10.

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

Ваш ответ на вопрос