Zdalne debugowanie w systemie iOS

W najnowszej wersji Chrome na iOS zastanawiałem się, jak włączyć zdalne debugowanie w Chrome na iOS?

Aktualizacja: Wraz z wydaniem iOS 6 można teraz zdalnie debugować za pomocą Safari .

Aktualizacja:

To nie jest już najlepsza odpowiedź, proszę postępuj zgodnie z radami Gregera .

Nowa odpowiedź:

Użyj Weinre .

Stara odpowiedź:

Możesz teraz używać Safari do zdalnego debugowania. Ale wymaga iOS 6.

Oto szybkie tłumaczenie http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Połącz iDevice przez USB z komputerem Mac
2. Otwórz Safari na komputerze Mac i aktywuj narzędzia programistyczne
3. W iDevice: przejdź do ustawień> safari> zaawansowane i aktywuj inspektora internetowego
4. Przejdź do dowolnej witryny z iDevice
5. Na komputerze Mac: otwórz menu programisty i wybierz witrynę z iDevice (znajduje się w górnym menu Safari)

Jak wskazał Simons, należy wyłączyć prywatne przeglądanie, aby zdalne debugowanie działało.

Ustawienia> Safari> Przeglądanie prywatne> WYŁ

Wybrana odpowiedź dotyczy tylko Safari. W tej chwili nie jest możliwe rzeczywiste zdalne debugowanie w Chrome na iOS, ale podobnie jak w większości przeglądarek mobilnych możesz użyć WeInRe do prostych debugowania. Konfiguracja jest trochę pracochłonna, ale pozwala sprawdzić DOM, zobaczyć stylizację, zmienić DOM i grać z konsolą.

Ustawić:

• Zainstaluj nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Otwórz http: // {wifi-ip-address}: 8080 / i skopiuj docelowy kod skryptu
• Wklej tag skryptu na swojej stronie (lub użyj bookmarkletu)
• Kliknij link do interfejsu użytkownika klienta debugowania (http: // {wifi-ip-address}: 8080 / client / # anonymous)
• Po pojawieniu się zielonej linii w obszarze Klienci przeglądarka jest podłączona

Bookmarklet jest nieco trudniejszy do zainstalowania. Najłatwiej jest, jeśli masz włączoną synchronizację zakładek w Chrome na komputery i urządzenia mobilne. Skopiuj adres URL bookmarkletu z lokalnego serwera weinre (tak samo jak powyżej). Niestety nie działa, ponieważ nie jest poprawnie zakodowany. Otwórz konsolę JavaScript i wpisz:

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

Powinieneś teraz mieć w schowku zakodowany bookmarklet. Wklej go do nowej zakładki w zakładkach mobilnych . Nazwij to weinre lub coś prostego do wpisania. Powinien być zsynchronizowany z telefonem komórkowym dość szybko, więc załaduj stronę, którą chcesz sprawdzić. Następnie wpisz nazwę zakładki na pasku adresu i powinieneś zobaczyć bookmarklet jako sugestię automatycznego uzupełniania. Kliknij, aby uruchomić kod bookmarkletu :)

Obecnie nie można bezpośrednio zdalnie debugować Chrome na iOS. Wykorzystuje uiWebView, który może działać nieco inaczej niż Mobile Safari.

Masz kilka opcji.

Opcja 1: Zdalne debugowanie mobilnego Safari przy użyciu inspektora Safari. Jeśli problem pojawi się w Mobile Safari, jest to zdecydowanie najlepsza droga. W rzeczywistości przejście przez symulator iOS jest jeszcze łatwiejsze.

Opcja 2: skorzystaj z Weinre, aby uzyskać uproszczone funkcje debugowania . Weinre nie ma wielu funkcji, ale czasem jest wystarczająco dobry.

Opcja 3: Zdalny debugowanie odpowiedniego interfejsu uiWebView, który działa tak samo.

Oto najlepszy sposób, aby to zrobić. Musisz zainstalować XCode .

1. Przejdź do github.com/paulirish/iOS-WebView-App i „Pobierz Zip” lub klonuj.
2. Otwórz XCode, otwórz istniejący projekt i wybierz właśnie pobrany projekt.
3. Otwórz WebViewAppDelegate.m i zmień urlStringna adres URL, który chcesz przetestować.
4. Uruchom aplikację w symulatorze iOS.
5. Otwórz Safari, otwórz menu rozwijania , wybierz iOS Simulator i wybierz widok internetowy.
6. Safari Inspector będzie teraz sprawdzał twój uiWebView.

Z mojego zrozumienia, Google Chrome wykorzystuje UIWebView dla iOS, a nie pełną implementację Chrome, podobnie jak odpowiednik Androida.

Wiele zdalnych konsol działa dobrze. http://farjs.com to mój projekt i udało mi się z powodzeniem debugować problemy specyficzne dla Crome iOS i nie zdarzające się podczas safari z jego użyciem. (i prawdopodobnie wszystkie inne przeglądarki mobilne)

Problem polega na tym, że wstrzyknięcie kodu debugującego jest nieco trudne, ponieważ Chrome nie pozwala na instalowanie skryptozakładek.

Zamiast tego możesz otworzyć jedną kartę na stronie, którą chcesz debugować, a drugą na farjs.com, a następnie kliknąć „bookmarklet”

Skopiuj kod JS bookmarkletu, wróć do pierwszej karty ze stroną, którą należy debugować, i wklej kod bookmarkletu na pasku lokalizacji.

Ostatnim krokiem jest przewinięcie do początku paska lokalizacji i dodanie „javascript:”, ponieważ Chrome go usunie.

Polecam Vorlon , działa jak weinre. Lubię interfejs użytkownika Vorlona i obsługuje SSL , moja aplikacja jest w HTTPS, próbowałem weinre z ngrok, ghostlab i vorlon, tylko vorlon działa dobrze.

Nie próbowałem tego, ale proxy debugowania WebKit na iOS (ios_webkit_debug_proxy / iwdp) podobno pozwala zdalnie debugować UIWebView. Z README.md

Ios_webkit_debug_proxy (alias iwdp) pozwala programistom sprawdzać MobileSafari i UIWebView na prawdziwych i symulowanych urządzeniach z iOS za pomocą interfejsu Chrome DevTools i protokołu zdalnego debugowania Chrome. Żądania DevTools są tłumaczone na wywołania usługi Remote Web Inspector firmy Apple.

Vorlon.JS może być używany do zdalnego debugowania systemu iOS lub dowolnego innego klienta.

1. Po prostu zainstaluj go globalnie, używając npm i -g vorlon
2. Uruchom serwer przy użyciu vorlon
3. Gdy serwer jest uruchomiony, otwórz http: // localhost: 1337 w przeglądarce, aby zobaczyć pulpit nawigacyjny Vorlon.JS
4. Ostatnim krokiem jest włączenie Vorlon.JS przez dodanie tego znacznika skryptu do aplikacji:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Wszyscy podłączeni klienci, np. IPhone, Android będą dostępne na liście klientów na pulpicie nawigacyjnym Vorlon.JS

Zauważ, że tego podejścia można także użyć do debugowania aplikacji nie działających na localhost przy użyciu ngrok . Szczegółowe informacje można znaleźć na stronie https://stackoverflow.com/a/45443203/2073920 .

Zrzeczenie się

Jestem tylko użytkownikiem i nie jestem powiązany z Vorlon.JS i ngrok

Musisz także wyłączyć „Prywatne przeglądanie”.

Ustawienia> Safari> Przeglądanie prywatne> WYŁ

Nawet ja szukam tej samej funkcji, która na dzień dzisiejszy jest jeszcze zaimplementowana. Mogę jednak wymyślić dwie opcje,

1. Zauważyłem, że zachowanie Chrome i Safari jest dość identyczne; Chrome obsługuje nawet żyroskop i inne powiązane zdarzenia obsługiwane przez Safari. Obecnie debuguję moją aplikację internetową, włączając konsolę debugowania w Safari (poprzez Ustawienia-> Safari)

2. Wypróbuj również Adobe Shadow, który umożliwia zdalne debugowanie / inspekcję i synchronizację.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) to kolejny sposób na debugowanie wszystkich urządzeń mobilnych z systemem iOS i Android (jednak bez Windows Phone). Wykorzystuje weinre do zdalnej kontroli / zmiany DOM. Nie jest to najszybsza metoda, ale działa w systemie Windows.

Chromium ma otwarty błąd: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Niestety zależy to od Apple, aby otworzyły interfejs API w WKView, po czym może się zdarzyć debugowanie w Safari.

Korzystam z adaptera remotedebug-ios-webkit-adapter, działa dobrze dla mnie z IOS i debuggerem otwartym w Chrome na Windows 10.

Będzie zadowolony, jeśli pomoże to jednemu Linkowi

Uwaga: Nie mam żadnego związku z twórcami Ghostlab Vanamco.

Ważne było dla mnie, aby móc debugować problemy związane z Chrome, więc postanowiłem znaleźć coś, co mogłoby mi w tym pomóc. Skończyło się na tym, że z radością rzuciłem pieniądze w Ghostlab 3 . Mogę testować przeglądarki mobilne Chrome i Safari tak, jakbym przeglądał je na komputerze. Daje mi tylko adres LAN do użycia z dowolnym urządzeniem, które chciałbym debugować. Każda aplikacja korzystająca z tego adresu pojawi się na liście w Ghostlab.

Wysoce rekomendowane.

Otwórz Safari Desktop iOS

Rozwijaj -> Tryb responsywnego projektowania

Kliknij „Inne” pod urządzeniem

Wklej to: Mozilla / 5.0 (iPad; CPU OS 10_2_1 jak Mac OS X) AppleWebKit / 602.1.50 (KHTML, jak Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Użyj narzędzi inspekcji Safari.

Zastrzeżenie: Pracuję w BrowserStack. ^{[Potwierdzono], czy mogę to opublikować ( czy mogę zasugerować produkt firmy, nad którym pracuję? )}

Debuguj Safari na iOS (obecnie nie dla Chrome, czytaj dalej, aby uzyskać więcej informacji).

Jak to działa

• Musisz rozpocząć sesję na dowolnym prawdziwym urządzeniu (istnieją emulatory, ale musisz rozpocząć sesję na prawdziwym urządzeniu) w przeglądarce BrowserStack, powiedzmy iPhone 6S - Safari / Chrome (nie ma jeszcze devtools dla Chrome, ale jest to na naszej mapie drogowej)
• Wpisz adres URL
• Możesz uruchomić DevTools, aby sprawdzić stronę internetową otwartą na zdalnym urządzeniu BrowserStacks. Udostępniłem ekrany dla tego samego poniżej.

Używanie DevTools z prawdziwymi telefonami

Najedź kursorem na elementy, edytuj HTML, CSS, tak jak działają devtoole przeglądarki na pulpicie.

Wykonywanie JavaScript w prawdziwym telefonie za pomocą DevTools

Przełącz na Consolezakładkę, uruchom kod JavaScript, sprawdź console.log()dane wyjściowe i tak dalej ...

Karta Sieć, sprawdź nagłówki żądań, odpowiedzi i tak dalej ...

Obsługa DevTools w BrowserStack?

• DevTools są dostępne na:

  • Prawdziwe urządzenia - iOS - Safari (DevTools na iOS Chrome znajduje się w naszej mapie drogowej)
  • Rzeczywiste urządzenia - Android - Chrome (na razie dostępny jest tylko Chrome na urządzeniach z Androidem)

• Przeglądarką klienta musi być Chrome lub Firefox. Oznacza to, że musisz używać przeglądarki Chrome lub Firefox na MacOSX lub Windows, aby korzystać z BrowserStack Real Device DevTools.

Uwaga: musisz kupić plan testowania na wszystkich rzeczywistych urządzeniach, jako darmowy użytkownik dostaniesz kilka urządzeń z systemem Android (w tym tablety) i kilka urządzeń z systemem iOS (w tym tablety). Ponadto, podkreślając słowo Real Devices, ponieważ zapewniają one również emulatory.

Więcej informacji na ten temat można znaleźć w sekcji DevTools na stronie Funkcje mobilne .