С недавним выпуском Chrome для iOS мне было интересно, как включить удаленную отладку для Chrome iOS?
Обновление: с выпуском iOS 6 теперь можно выполнять удаленную отладку с Safari .
С недавним выпуском Chrome для iOS мне было интересно, как включить удаленную отладку для Chrome iOS?
Обновление: с выпуском iOS 6 теперь можно выполнять удаленную отладку с Safari .
Ответы:
Обновить:
Это уже не лучший ответ, пожалуйста, следуйте советам Грегерса .
Новый ответ:
Используйте Weinre .
Старый ответ:
Теперь вы можете использовать Safari для удаленной отладки. Но для этого требуется iOS 6.
Вот быстрый перевод http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector
Как указывает ответ Саймонса, для удаленной отладки необходимо отключить приватный просмотр.
Настройки> Safari> Личный просмотр> OFF
источник
Выбранный ответ только для Safari. В настоящий момент невозможно выполнить настоящую удаленную отладку в Chrome на iOS, но, как и в большинстве мобильных браузеров, вы можете использовать WeInRe для некоторой простой отладки. Это немного сложная настройка, но она позволяет вам проверять DOM, видеть стили, менять DOM и играть с консолью.
Установить:
npm install -g weinre
weinre --boundHost -all-
Букмарклет немного сложнее в установке. Проще всего, если у вас включена синхронизация закладок для настольного и мобильного Chrome. Скопируйте URL-адрес букмарклета с локального сервера weinre (как описано выше). К сожалению, это не работает, потому что это не закодировано должным образом. Итак, откройте консоль JavaScript и введите:
Теперь у вас должен быть букмарклет в кодировке URL в вашем буфере обмена. Вставьте его в новую закладку в разделе « Мобильные закладки» . Назовите это weinre или что-то простое для ввода. Он должен быть синхронизирован с вашим мобильным телефоном довольно быстро, поэтому загрузите страницу, которую вы хотите проверить. Затем введите имя закладки в строке URL-адреса, и вы должны увидеть букмарклет как предложение автозаполнения. Нажмите на нее, чтобы запустить код букмарклета :)
источник
Ctrl-Shift-B
если она не видна).npm install -g weinre
не работал для меня. Поэтому мне пришлось запустить его с версиейnpm install -g weinre@2.0.0-pre-I0Z7U9OV
. проверьте последнюю версию здесь npmjs.com/package/weinre .Вы не можете напрямую удаленно отлаживать Chrome на iOS в настоящее время. Он использует uiWebView, который может немного отличаться от Mobile Safari.
У вас есть несколько вариантов.
Вариант 1. Удаленная отладка Mobile Safari с помощью инспектора Safari. Если ваша проблема воспроизводится в Mobile Safari, это, безусловно, лучший путь. На самом деле, проходить симулятор iOS еще проще.
Вариант 2: используйте Weinre для упрощенного процесса отладки . Weinre не имеет много функций, но иногда это достаточно хорошо.
Вариант 3: Удаленная отладка правильного uiWebView, который работает так же.
Вот лучший способ сделать это. Вам нужно будет установить XCode .
urlString
его на URL-адрес, который вы хотите проверить.источник
Насколько я понимаю, Google Chrome использует UIWebView для iOS, а не полноценную реализацию Chrome, как аналог Android.
источник
Многие удаленные консоли работают нормально. http://farjs.com - это мой проект, и я смог успешно отладить проблемы, характерные для Crome iOS и не возникающие в сафари с его использованием. (и, вероятно, все другие мобильные браузеры)
Проблема в том, что внедрение кода отладки немного сложнее, поскольку Chrome не позволяет устанавливать закладки.
Вместо этого вы можете открыть одну вкладку на странице, которую вы хотите отладить, а другую на farjs.com и затем нажать «букмарклет»
Скопируйте код JS букмарклета, вернитесь на первую вкладку со страницей, которую необходимо отладить, и вставьте код букмарклета в строку адреса.
Последний шаг - прокрутить до начала строки адреса и добавить «javascript:», так как Chrome удалит его.
источник
Я рекомендую Vorlon , работает как weinre. Мне нравится пользовательский интерфейс Vorlon, и он поддерживает SSL , мое приложение в HTTPS, я пробовал weinre с ngrok, ghostlab и vorlon, только vorlon работает нормально.
источник
Я не пробовал, но прокси отладки iOS WebKit (ios_webkit_debug_proxy / iwdp) предположительно позволяет удаленно отлаживать UIWebView. С README.md
источник
Vorlon.JS можно использовать для удаленной отладки iOS или любого другого клиента.
npm i -g vorlon
vorlon
<script src="http://<yourExternalIP>:1337/vorlon.js"></script>
Обратите внимание, что этот подход также можно использовать для отладки приложений, не запущенных на локальном хосте, с помощью ngrok . См. Https://stackoverflow.com/a/45443203/2073920 для получения подробной информации.
отказ
Я просто пользователь, и я не связан с Vorlon.JS и ngrok
источник
Вам также необходимо отключить функцию «Частный просмотр».
Настройки> Safari> Личный просмотр> OFF
источник
Даже я ищу ту же функцию, и на сегодняшний день она еще не реализована. Я могу думать о двух вариантах, однако,
Я заметил, что поведение Chrome и Safari совершенно одинаковое; Chrome даже поддерживает гироскоп и другие связанные события, которые поддерживаются Safari. В настоящее время я отлаживаю свое веб-приложение, включив консоль отладки в Safari (через «Настройки» -> «Safari»).
Также попробуйте Adobe Shadow, который позволяет удаленную отладку / проверку и синхронизацию.
НТН.
источник
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.
источник
Я использую remotedebug-ios-webkit-adapter, у меня хорошо работает с IOS и отладчиком, открытым в Chrome на Windows 10.
Будем рады , если это поможет какой - то один Ссылка
источник
Примечание: я не имею никакого отношения к создателям Ghostlab Vanamco.
Для меня было важно иметь возможность отлаживать специфичные для Chrome проблемы, поэтому я решил найти что-то, что могло бы помочь мне в этом. В итоге я с радостью бросил свои деньги в Ghostlab 3 . Я могу тестировать мобильные браузеры Chrome и Safari, как если бы я просматривал их на своем рабочем столе. Это просто дает мне адрес локальной сети для использования на любом устройстве, которое я хотел бы отладить. Каждое приложение, использующее этот адрес, появится в списке в Ghostlab.
Настоятельно рекомендуется.
источник
Откройте 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.
источник
Отладка Safari на iOS (не для Chrome, читайте дальше, чтобы узнать больше).
Как это работает?
Использование DevTools с реальными телефонами
Наведите указатель мыши на элементы, отредактируйте HTML, CSS так же, как работает настольный браузер.
Выполнение JavaScript в реальном телефоне с использованием DevTools
Переключиться на
Console
вкладку, выполнить код JavaScript, проверитьconsole.log()
вывод и так далее ...Вкладка «Сеть», проверка заголовков запроса, ответа и т. Д.
Поддержка DevTools на BrowserStack?
DevTools доступны на:
Клиентский браузер должен быть Chrome или Firefox. Это означает, что вам нужно использовать браузер Chrome или Firefox на MacOSX или Windows, чтобы использовать BrowserStack Real Device DevTools.
Примечание: вам нужно купить план для тестирования на всех реальных устройствах, так как в качестве бесплатного пользователя вы получите пару устройств Real Android (включая планшеты) и пару устройств Real iOS (включая планшеты). Кроме того, подчеркивая слово Real Devices, потому что они также предоставляют эмуляторы.
Подробнее об этом см. Раздел DevTools на странице «Мобильные функции» .
источник