Zdalne debugowanie w systemie iOS


199

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 .


2
Zdalne debugowanie można teraz wykonać za pomocą Safari na Macu. Ale jeśli rozwijasz się w systemie Linux lub Windows, nadal musisz używać weinre (jak podano w odpowiedzi na gregery).
Dehalion

3
Zdalne debugowanie za pomocą Safari obsługuje tylko Mobile Safari, a nie iOS Chrome.
Matt Jensen

Proszę spojrzeć medium.com/@nikoloza/…
Machado

Odpowiedzi:


111

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Ł


11
Tak, już tego używam. Wreszcie! Bani, że wersja Safari dla Windowsa go nie ma.
Hyangelo

5
Mam nadzieję, że Chrome wkrótce włączy tę samą funkcję, aby działała na wszystkich systemach operacyjnych.
F Lekschas

49
Tak - na pewno byłoby miło, gdyby odpowiedziała na zadane pytanie!
Irene Knapp,

4
Wyłączanie przeglądania prywatnego nie jest już wymagane.
Miles

3
Powód negatywny: pytania dotyczą przeglądarki Chrome, a nie Safari.
NickG,

230

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ą.

wprowadź opis zdjęcia tutaj

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 :)

wprowadź opis zdjęcia tutaj


27
To jedyna poprawna odpowiedź, wszystkie pozostałe dotyczą Safari (spacer po parku)
Mars Robertson

2
Bardzo pomocne instrukcje! Dodam tylko, że aby zainstalować bookmarklet, zamiast robić kopię, możesz po prostu przeciągnąć podany link bookmarklet „weinre target debug” do paska narzędzi zakładek (ustaw pasek narzędzi jako widoczny, Ctrl-Shift-Bjeśli nie jest widoczny).
Kai Carver

Musiałem odświeżyć przeglądarkę po zainstalowaniu bookmarkletu, aby działał.
ooolala,

npm install -g weinrenie działało dla mnie. Musiałem więc uruchomić go z wersją npm install -g weinre@2.0.0-pre-I0Z7U9OV. sprawdź najnowszą wersję tutaj npmjs.com/package/weinre .
vinesh

1
FWIW, weinre obecnie nie obsługuje Shadow Dom - pokazuje tylko elementy najwyższego poziomu i ich light Dom. Nie działa również w przypadku cieniowanej dominy oprócz elementów najwyższego poziomu i ich cienistych dom (i jasnych również).
Max Waterman,

52

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.

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj


7
Jak sprawdzić iOS (iPhone / iPad) w systemie Windows za pomocą Chrome? Czy jest na to jakaś metoda?
Surjith SM

@SurjithSM Ta odpowiedź nie pomoże w systemie Windows, ponieważ nie można zainstalować XCode w systemie Windows i utworzyć aplikacji iOS. Spróbuj zamiast tego stackoverflow.com/a/22047495/1737158
Lukas Liesis

Mam już doświadczenie z github.com/google/ios-webkit-debug-proxy, który jest niesamowitym narzędziem, a wczoraj próbowałem debugować Google Chrome za pomocą emulatora iOS - to najbardziej niesamowite doświadczenie. Dzięki za # 3
Oleg Andreyev

10

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


1
Tak, odkryłem to po tym, jak zadałem to pytanie. To naprawdę szkoda dla jabłka. To pytanie pozostawiam otwarte, ponieważ ktoś wymyślił sposób, aby to zrobić.
Hyangelo

4

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.


4

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.


3

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.


1
Wsparcie dla przeglądarki internetowej Chrome jest teoretycznie realizowane przez: github.com/RemoteDebug/remotedebug-ios-webkit-adapter, który jest zbudowany na serwerze proxy debugowania Webkit. Do tej pory miałem ograniczony sukces z tym projektem, ale spodziewam się, że będzie lepiej.
Matt Jensen

3

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 wprowadź opis zdjęcia tutaj

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


Wykonałem wszystkie kroki, ale wygląd mojego iPhone'a nie został wykryty w VorlonJS działającym na Macu
Amarjit Singh,

2

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

Ustawienia> Safari> Przeglądanie prywatne> WYŁ


nie jestem pewien, dlaczego ppl głosuje za odpowiedzią na tę odpowiedź. przeglądanie prywatne musi być rzeczywiście wyłączone, aby umożliwić zdalne debugowanie.
kod podstawowy

14
@basecode Ponieważ jest to odpowiedź uzupełniająca, która powinna być w komentarzu.
GusDeCooL,

2
@GusDeCooL Rozumiem, dziękuję! Pomocny byłby komentarz downvoter, który wyjaśnia to.
kod podstawowy

0

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.


0

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.


Adobe Edge Inspect nie jest już wymieniony w Adobe Creative Cloud. Zobacz adobe.com/products/edge-inspect.html .
Ron Inbar

To prawda, że ​​nadal możesz go pobrać z bieżącą subskrypcją, mimo że nie jest już w fazie rozwoju. Zobacz, jak to zrobić tutaj: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings

Jednak aplikacja na iOS nie jest już dostępna. Nadal działa na Androidzie, ale nie ma już iOS: itunes.apple.com/app/id498621426
bg17aw


0

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


0

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.

wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj

Wysoce rekomendowane.


-2

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.


-3

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.

DevTools na prawdziwych telefonach, debugowanie responsywnych stron internetowych.


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 ...

wykonywać JavaScript w prawdziwych telefonach za pomocą devtools


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

Karta Sieć, aby sprawdzić żądania


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 .


3
Poprosił o debugowanie Chrome na iOS. Jestem klientem przeglądarki i mam komputer Mac, więc debugowanie Safari na iOS jest możliwe, ale Chrome nie ma możliwości zdalnej debugowania
fabs

@fabs Mamy to na naszej mapie drogowej. Wspomniałem też, że działa tylko na Safari - urządzeniach z iOS i Chrome na urządzeniach z Androidem :)
Pan Alien

W przypadku problemów z układem nie powinno to stanowić problemu, ponieważ mechanizmem układu obu przeglądarek jest webkit. W połączeniu z funkcją Testowanie serwera lokalnego nie wymaga to dodatkowej konfiguracji w celu debugowania hosta lokalnego.
Tim Vermaelen,

1
Odpowiedź i tak nie odnosi się do pytania. Chociaż Browserstack zapewnia świetną obsługę, ta odpowiedź jest całkowicie nie na temat.
Matt Jensen
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.