Debuguj ipad safari za pomocą komputera

Aktualizacja Październik 2019

Zaktualizowano i przetestowano 24/6/2017

Używanie Chrome na Windows 8 i nowszych :

• Pobierz i zainstaluj węzeł

• Pobierz i zainstaluj ITunes i podłącz go do urządzenia. (Wyskakujące okienko powinno pojawić się na iPadzie, aby uzyskać autoryzację) . Pamiętaj, aby zezwolić web inspector w swoim iPad

• Pobierz i zainstaluj zdalny adapter webkit

npm install remotedebug-ios-webkit-adapter -g

• Uruchom adapter:

remotedebug_ios_webkit_adapter --port=9000

Powinieneś otrzymać podobne wyjście:

C:\Windows\system32> remotedebug_ios_webkit_adapter --port=9000 remotedebug-ios-webkit-adapter is listening on port 9000 iosAdapter.getTargets ...

• Otwórz Chrome i przejdź do następującego linku:

Chrome: / / inspect/ # devices

• kliknij Konfiguruj obok "Odkryj cele sieci" i dodaj następujące: localhost: 9000

Upewnij się, że strona, którą chcesz debugować, jest otwarta w safari, powinieneś ją zobaczyć na stronie Inspektora chrome pod Remote Target

Dodatkowy krok dla iOS 11 dzięki @skaurus

Zobacz odpowiedź monkeythedev aby uzyskać najprostszy sposób debugowania na komputerze z systemem Windows 8+ z systemem iOS 9+. Zaktualizowałem mój post na blogu używając informacji z tej odpowiedzi i innych źródeł, a takżenagrałem screenshare . Poniższa metoda powinna nadal działać w systemie iOS 8 i w dół, w razie potrzeby.

Istnieje całkiem łatwy sposób debugowania strony internetowej w Safari na iOS za pomocą Firefoksa na komputerze z systemem Windows.

Uwaga: Ryan napisał w komentarzach poniżej, że to może działać tylko na iOS 8 i w dół. Nie jestem w stanie potwierdzić, ale bądźcie świadomi.

Napisałem szczegółowy wpis na blogu na ten temat, ale oto najważniejsze informacje:

1. zainstaluj iTunes, aby uzyskać dołączone aplikacje "Apple Mobile Device Support" i "Apple Application Support". (Odinstaluj iTunes później, jeśli chcesz)
2. podłącz urządzenie z systemem IOS przez USB.
3. Włącz web inspector na iOS (dostępny na iOS 6 i nowszych).
4. Otwórz Safari na urządzeniu z systemem iOS i przejdź do strony internetowej.
5. Otwórz Firefoksa na komputerze z systemem Windows i naciśnij Shift + F8 , aby otworzyć WebIDE, który powinien zawierać niezbędny dodatek Valance , Jeśli używasz Firefox Developer Edition (dowolna wersja) lub Firefox 37 i nowszy (dowolny kanał).
Z jakiegoś powodu nie mogłem go połączyć z moim urządzeniem z systemem iOS, dopóki nie pobrałem programu iOS-webkit-debug-proxy-win32 i go uruchomiłem. Otwiera pusty wiersz polecenia, ale po powrocie do WebIDE po otwarciu go, odłączyłem się, a następnie ponownie podłączyłem i zobaczyłem informacje o debugowaniu dla strony internetowej, którą otworzyłem w Safari. Być może nie musisz tego robić, ponieważ inny użytkownik po prostu musiał dodać wyjątek do swojej zapory, a następnie odłączyć / ponownie połączyć i zadziałało.

Dostępne informacje o debugowaniu nie są tak wyczerpujące jak narzędzia programistyczne Chrome( konkretnie brak zakładki "Networking"), ale wystarczyło mi, aby móc zobaczyć, co się dzieje w Konsola.

To pytanie było ponad 4 lata temu, ale czuję, że warto wspomnieć o innej opcji, która jest niezależna od platformy, która wydaje się nie być wymieniona powyżej:

VConsole

Jest to JavaScript, który można wstrzyknąć do strony(S), który nadpisze wszystkie natywne wyjście konsoli i pokazać go jako nakładkę na zawartość strony, w poziomie szczegółowości, który jest prawie tak dobry, jak narzędzia programistyczne Google Chrome.

Działa dobrze na iOS Safari, jak podobnie jak w innych przeglądarkach mobilnych - tak długo, jak JavaScript jest włączony w przeglądarce.

Jak zainstalować: https://www.npmjs.com/package/vconsole

Będziesz potrzebował narzędzi NPM, aby go zainstalować, ale w rzeczywistości nie jest to wymagane do używania NPM do budowania projektu. Możesz po prostu zainstalować vconsole gdzieś w oddzielnym folderze i po prostu skopiuj i wklej vconsole./ min.js z niego.

Po wstawieniu go na swoją stronę, będzie wyglądał tak:

<script type="text/javascript" src="vconsole.min.js"></script>
<script type="text/javascript>let vc = new VConsole(); // this will initialize it.</script>

Wizualnie jest bardzo atrakcyjna, zobaczysz zielony przycisk w prawym dolnym rogu strony w przeglądarce mobilnej/desktopowej, który otworzy nakładkę konsoli.

Oczywiście nie daje to możliwości wyboru elementu, patrz kalkulowany css itp., ale jeśli szukasz wyjścia konsoli i jakiegoś raportu sieciowego, ten jest naprawdę łatwy w użyciu.

Październik 2019]}

AFAIK, dla najnowszych wersji IOS nie ma ogólnego rozwiązania do debugowania IOS z komputera.

Możesz jednak użyć jednego z następujących rozwiązań:

1. wyświetla komunikaty konsoli w samej przeglądarce. Jak opisano tutaj i w odpowiedzi Sinisa.
[7]} "remotedebug-iOS-webkit-adapter" nie działa w przypadku debugowania systemu IOS 12+. Wymaga dodatkowych kroków dla IOS 11 i działa również dla IOS 10 i być może starszych wersji.

Używam PrePros do wstępnego przetwarzania CSS i ma wbudowany serwer do debugowania mobilnego i web inspector. Ale to jest dobre tylko dla lokalnych stron nawet nadal...

Z mojego doświadczenia wynika, że często nie jest to problem tylko z mobilnym Safari, ale Safari w ogóle. W takich przypadkach może pomóc wypróbowanie normalnego Safari (Dla Windows) i sprawdzenie, czy pojawiają się tam błędy. Jeśli tak, o wiele łatwiej jest debugować coś w ten sposób.

Nie próbowałem tego na komputerze, ale powinieneś być w stanie przejść do http://[DEVICE_IP_ADDRESS]:9999, aby debugować.