Віддалена налагодження iOS

З недавним випуском Chrome для iOS мені було цікаво, як увімкнути віддалену налагодження для iOS Chrome?

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

Оновлення:

Це вже не найкраща відповідь. Дотримуйтесь порад грегерів .

Нова відповідь:

Використовуйте 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

Обрана відповідь призначена лише для 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-адреси, і ви повинні побачити закладку як автоматичне завершення пропозиції. Клацніть його, щоб запустити код закладок :)

Зараз ви не можете безпосередньо віддалено налагоджувати Chrome на iOS. Він використовує uiWebView, який може діяти тонко інакше, ніж Mobile Safari.

У вас є кілька варіантів.

Варіант 1: Віддалена налагодження мобільного Safari за допомогою інспектора Safari. Якщо ваша проблема відтворена в мобільному 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 Simulator та виберіть веб-перегляд.
6. Тепер Safari Inspector буде перевіряти ваш uiWebView.

З мого розуміння, Google Chrome використовує UIWebView iOS, а не повну реалізацію Chrome, як аналог Android.

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

Проблема полягає в тому, що введення коду налагодження трохи складне, оскільки 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

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

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

Зауважте, що цей підхід можна також використовувати для налагодження програм, які не працюють на localhost за допомогою ngrok . Докладніше дивіться на https://stackoverflow.com/a/45443203/2073920 .

Відмова від відповідальності

Я просто користувач, і я не пов'язаний з Vorlon.JS та ngrok

Вам також потрібно вимкнути "Приватне перегляд".

Налаштування> Safari> Приватний перегляд> OFF

Навіть я шукаю ту саму особливість, і на сьогоднішній день її ще потрібно здійснити. Але я можу придумати два варіанти,

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

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

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) - це ще один спосіб налагодження всіх мобільних пристроїв IOS та Android (хоча Windows Phone немає). Він використовує weinre для віддаленого огляду / зміни DOM. Це не найшвидший спосіб, але він працює в Windows.

На Chromium відкрита помилка: https://bugs.chromium.org/p/chromium/isissue/detail?id=584905

На жаль, вони залежать від Apple, щоб відкрити API в WKView, щоб це відбулося, після чого, можливо, налагодження буде доступне від Safari.

Я використовую adaptedebug-ios-webkit-адаптер, добре працює для мене з IOS та налагоджувачем, відкритим у Chrome у Windows 10.

Буде радий, якщо це допоможе якомусь одному Посиланню

Примітка: Я не маю жодної приналежності до творців Ghostlab Vanamco.

Мені було важливо мати можливість налагоджувати проблеми, пов’язані з Chrome, тому я вирішив знайти щось, що могло б мені у цьому допомогти. Я врешті-решт кинув гроші на Ghostlab 3 . Я можу перевірити мобільні браузери Chrome і Safari так, ніби переглядаю їх на робочому столі. Це просто дає мені локальну адресу, яку потрібно використовувати для будь-якого пристрою, який я хотів би налагодити. Кожна програма, що використовує цю адресу, з’явиться у списку в Ghostlab.

Настійно рекомендується.

Відкрити iOS Safari Desktop

Розробка -> режим чуйного дизайну

Натисніть "Інше" під пристроєм

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

Відмова: Я працюю в BrowserStack. ^{[Підтверджено], чи дозволено мені публікувати це ( чи можу я запропонувати товар компанії, в якій я працюю? )}

Налагодження Safari на iOS (не для Chrome на даний момент, читайте заздалегідь, щоб отримати докладнішу інформацію).

Як це працює?

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

Використання DevTools з реальними телефонами

Наведіть курсор на елементи, відредагуйте HTML, CSS так само, як працюють версії настільних браузерів.

Виконання JavaScript у реальному телефоні за допомогою DevTools

Перехід на Consoleвкладку, виконання коду JavaScript, перевірка console.log()вихідних даних тощо.

Вкладка мережі, перевірка заголовків запитів, відповідь тощо. ...

Підтримка DevTools на BrowserStack?

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

  • Реальні пристрої - iOS - Safari (DevTools для iOS Chrome є у нашій дорожній карті)
  • Реальні пристрої - Android - Chrome (наразі на пристроях Android доступний лише Chrome)

• Клієнтським браузером повинен бути Chrome або Firefox. Це означає, що вам потрібно використовувати браузер Chrome або Firefox на MacOSX або Windows, щоб користуватися браузером Real Device DevTools.

Примітка. Вам потрібно придбати план тестування на всіх реальних пристроях, як безкоштовний користувач, ви отримаєте пару реальних пристроїв Android (включаючи планшети) та пару пристроїв Real iOS (включає планшети). Також наголос на слові « Реальні пристрої», оскільки вони також забезпечують емулятори.

Детальніше про це див. У розділі DevTools на сторінці Мобільні функції .