Jak używać narzędzia Web Inspector do debugowania Mobile Safari (iPhone lub iPad)

Tworzenie stron internetowych na urządzenia mobilne lub debugowanie aplikacji hybrydowej jest często trudne. Ale na szczęście dla osób projektujących na iOS, począwszy od iOS 6, Apple oferuje funkcję zdalnego inspektora sieci w iOS.

Web Inspector umożliwia twórcom aplikacji internetowych i mobilnych używanie narzędzi programistycznych macOS i OS X Safari do zdalnego debugowania treści internetowych lub aplikacji hybrydowych w mobilnej przeglądarce Safari na iPadzie lub iPhonie.

To łatwy i praktyczny sposób na debugowanie, optymalizację i modyfikację stron internetowych lub aplikacji hybrydowych na iOS.

Aby uzyskać dostęp do tych narzędzi programistycznych, włącz menu Opracuj w zaawansowanych preferencjach Safari na komputerze Mac.

Szybkie porady

Postępuj zgodnie z tymi krótkimi wskazówkami, aby uruchomić inspektora internetowego i debugować witrynę lub aplikację pod kątem Safari

• Zresetuj swoją lokalizację i ustawienia prywatności na iPhonie, iPadzie lub iPodzie touch. Iść do Ustawienia > Ogólne > Resetuj > Resetuj lokalizację i prywatność
• Upewnij się, że logujesz się do tego samego Apple ID na komputerze, co iPhone, iPad lub iPod touch
• Włącz synchronizację Safari iCloud zarówno na komputerze, jak i na dowolnym iPhonie, iPadzie lub iPodzie touch
• Na iPhonie lub iPadzie przejdź do Ustawienia > Safari > Zaawansowane i włącz Inspektor sieciowy
• Na komputerze otwórz Safari i przejdź do Menu Safari > Preferencje > Zaawansowane i zaznaczenie Pokaż menu Develop na pasku menu

Powiązane artykuły

• Wyświetl kod źródłowy HTML strony internetowej na iPadzie lub iPhonie. Aplikacja nie jest wymagana!
• Jak wyświetlić kod źródłowy HTML w Safari
• Jak wyświetlić favicony w Safari na iPhone'y i komputery Mac?

Wymagany komputer Mac

Przepraszam, ludzie z Windows, ale Inspektor sieci Safari jest kompatybilny tylko z komputerami Mac!

Użyj tego samego Apple ID i iCloud Sync!

Upewnij się, że zarówno urządzenie iDevice, jak i komputer Mac są zalogowane przy użyciu tego samego identyfikatora Apple ID i że włączasz Safari w iCloud.

Dla twojego iDevice: Ustawienia > Profil Apple ID > iCloud > Safari > włączony

Dla twojego Maca: Apple Menu > Preferencje systemowe > Apple ID lub iCloud > Safari > Zaznaczone

I sprawdź, czy Safari też ma tę samą wersję

Upewnij się, że Safari na komputerze Mac jest w tej samej wersji co Safari na iDevice. Może być konieczne uaktualnienie wersji systemu iOS lub wersji przeglądarki Safari działającej na komputerze Mac.

Zresetuj swoją lokalizację i ustawienia prywatności

1. Iść do Ustawienia > Ogólne
2. Wybierz Resetowanie
3. Wybrać Zresetuj lokalizację i prywatność

Profesjonalna wskazówka dotycząca skrótów klawiaturowych na komputerze Mac dla twórców stron internetowych

Jeśli naciśniesz CTRL+Command+R w Safari, możesz zobaczyć, jak witryna będzie wyglądać na określonym urządzeniu, wybierając to urządzenie.

Użyj narzędzia Web Inspector do debugowania mobilnego Safari

1. Na iPadzie, iPhonie lub iPodzie touch stuknij Ustawienia > Safari > Zaawansowane i włącz Inspektor sieci. I włącz JavaScript, jeśli jeszcze nie jest włączony

2. Na komputerze Mac uruchom Safari i przejdź do Menu Safari > Preferencje > Zaawansowane następnie sprawdź „Pokaż menu Develop na pasku menu”jeśli jeszcze tego nie zrobiłeś

3. Podłącz urządzenie iOS do komputera Mac za pomocą kabla USB. Ma to krytyczne znaczenie — musisz ręcznie podłączyć urządzenia za pomocą kabla. Nie działa przez WiFi!

4. Teraz na iPadzie otwórz witrynę, którą chcesz debugować, a następnie na komputerze Mac otwórz Safari i przejdź do „Rozwijać" menu. Teraz widzisz swoje urządzenie iDevice połączone z komputerem Mac. Jeśli nie masz otwartej żadnej strony na swoim iDevice, zobaczysz komunikat „Brak aplikacji do sprawdzenia”.

5. Teraz debuguj stronę otwartą w mobilnym Safari, tak jak debugujesz na Macu, sprawdzaj elementy DOM, modyfikuj CSS, mierz wydajność strony i uruchamiaj polecenia JavaScript.

Użyj narzędzia debugera, aby znaleźć przyczynę wszelkich błędów JavaScript na Twojej stronie internetowej. Możesz dodawać punkty przerwania, debugować skrypt java i sprawdzać wartości zmiennych w czasie wykonywania.

Safari powinno również wykryć wszelkie błędy CSS, HTML i JavaScript. Zobaczysz szczegóły każdego błędu w debugerze.

iDevice nie pojawia się w menu Develop w Safari?

•  Wyczyść pamięć podręczną Safari i pliki cookie
• Zaktualizuj Safari na Macu i iDevice, jeśli jest dostępna aktualizacja.
  • Jeśli korzystasz z wersji beta systemu iOS lub macOS, może być konieczne uruchomienie najnowszej wersji beta na wszystkich urządzeniach
• Wypróbuj inny kabel i/lub port na komputerze Mac. Upewnij się, że kabel to oryginalny kabel Lightning firmy Apple lub certyfikat MFI (Made For iPhone)
• Sprawdź, czy Web Inspector jest włączony. Aktualizacje iOS czasami przełączają to z powrotem do domyślnego ustawienia WYŁĄCZENIA. Więc po prostu sprawdź Ustawienia > Safari > Zaawansowane > Inspektor sieci
  • Spróbuj wyłączyć Web Inspector, odczekaj 10 sekund i włącz ponownie
• Zamiast tego wypróbuj przeglądarkę Safari Technology Preview
• Zamknij Safari na komputerze Mac i uruchom go ponownie. Sprawdź, czy Safari Twojego Maca rozpoznaje Twoje urządzenie i umożliwia debugowanie
• Sprawdź, czy nie używasz trybu przeglądania prywatnego Safari if Twój iDevice pojawia się tylko na chwilę w menu rozwijania Safari, a następnie znika
• Otwórz Monitor aktywności i sprawdź, co się dzieje z Safari

Wskazówki dla czytelników 

• Jeśli używasz starszego iDevice z systemem iOS 6 lub starszym, przeglądarka internetowa Safari na Twoim urządzeniu ma własną wbudowaną konsolę debugowania! Wystarczy wejść do konsoli debugowania Safari, przechodząc do Ustawienia > Safari > Deweloper > Konsola debugowania