Вопрос по google-chrome-devtools, google-chrome, chrome-for-ios – Удаленная отладка iOS

183

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

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

Удаленная отладка с Safari поддерживает только Mobile Safari, а не iOS Chrome. Matt Jensen
Пожалуйста, взглянитеmedium.com/@nikoloza/… Machado
Удаленная отладка теперь может быть выполнена с Safari на Mac. Но если вы разрабатываете для Linux или Windows, вам все равно придется использовать weinre (как указано в ответе gregers). Dehalion

Ваш Ответ

15   ответов
10

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

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

[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 раздел наСтраница мобильных функций.

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

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

Я надеюсь, что Chrome скоро включит ту же функцию, чтобы она работала во всех ОС.
Для iOS 7 вам необходимо установить Safari 6.1, чтобы использовать удаленную отладку, которая сейчас доступна только для разработчиков и требует как минимум OS X 10.7:developer.apple.com/downloads/index.action?name=Safari%206.1
Да, я уже использую этот. В заключение! Это отстой, что версия Windows Safari не имеет, хотя. Hyangelo
Отключение приватного просмотра больше не является обязательным требованием.
Да, было бы неплохо, если бы это ответило на заданный вопрос!
2

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

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

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

ить настоящую удаленную отладку в 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

Это единственный правильный ответ, все остальное относится к сафари (прогулка в парке)
Очень полезные инструкции! Я просто добавлю, что для установки букмарклета вместо копирования можно просто перетащить предоставленную «weinre target debug». ссылка на закладку на панель инструментов закладок (сделайте панель инструментов видимойCtrl-Shift-B если он не виден).
Ваш телефон и компьютер должны быть в одной сети? Я заметил, что 4-й пункт маркирует Wi-Fi
Мне нужно было обновить браузер после установки букмарклета, чтобы он заработал.
npm install -g weinre не работал для меня. Поэтому мне пришлось запустить его с версиейnpm install -g [email protected], проверьте последнюю версию здесьnpmjs.com/package/weinre.
0

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

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

2

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

@GusDeCooL Понятно, спасибо! Комментарий downvoter, который объясняет это, был бы полезен.
не уверен, почему госзакупок downvote этот ответ. приватный просмотр действительно должен быть отключен, чтобы разрешить удаленную отладку.
@basecode Потому что это дополнительный ответ, который должен быть в комментарии.
Больше не правда.
4

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

3

Отладочный прокси-сервер 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.

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

емя. Он использует 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

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

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

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

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

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

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

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

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

0

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

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.

НТН.

0

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

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

-3

Разработать - & 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.

Похожие вопросы