Jak używać Inspektora sieci do debugowania mobilnej przeglądarki 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 programistom aplikacji internetowych i mobilnych używanie macOS i OS X Safari Developer Tools do zdalnego debugowania treści internetowych lub aplikacji hybrydowych w mobilnej przeglądarce Safari na iPadzie lub iPhonie.

Jest to łatwy i praktyczny sposób debugowania, optymalizacji i modyfikowania stron internetowych lub aplikacji hybrydowych na iOS. 

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

Postępuj zgodnie z tymi krótkimi wskazówkami, aby uruchomić inspektora sieci i debugować witrynę lub aplikację w przeglądarce Safari

  • Zresetuj ustawienia lokalizacji i prywatności na telefonie iPhone, iPadzie lub iPodzie touch. Wybierz kolejno opcje  Ustawienia> Ogólne> Resetuj> Resetuj lokalizację i prywatność
  • Upewnij się, że logujesz się do tego samego Apple ID na komputerze, co na telefonie iPhone, iPadzie lub iPodzie touch
  • Włącz synchronizację Safari iCloud zarówno na komputerze, jak i na dowolnym telefonie iPhone, iPadzie lub iPodzie touch
  • Na iPhonie lub iPadzie przejdź do  Ustawienia> Safari> Zaawansowane i włącz Inspektor sieci
  • Na komputerze otwórz Safari i przejdź do  menu Safari> Preferencje> Zaawansowane i zaznacz opcję Pokaż menu Programowanie na pasku menu

Wymagany komputer Mac

Przepraszamy, 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 Twój iDevice, jak i Mac są zalogowane przy użyciu tego samego Apple ID i że włączyłeś Safari w iCloud.

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

Na komputerze Mac:  Menu Apple> Preferencje systemowe> Apple ID lub iCloud> Safari> Zaznaczone

I sprawdź, czy Safari jest w tej samej wersji

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

Zresetuj swoją lokalizację i ustawienia prywatności

  1. Idź do Ustawienia> Ogólne
  2. Wybierz opcję Resetuj
  3. Wybierz opcję Zresetuj lokalizację i prywatność

Wskazówka dotycząca skrótów klawiaturowych Pro na Macu 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.

Przełącz skrót klawiaturowy, aby wyjść z widoku programisty WWW.

Użyj Web Inspector do debugowania mobilnej przeglądarki Safari

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

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

3. Podłącz urządzenie iOS do komputera Mac za pomocą kabla USB. Jest to krytyczne - musisz podłączyć urządzenia ręcznie 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 menu „ Develop ”. Teraz widzisz swoje urządzenie iDevice połączone z komputerem Mac. Jeśli nie masz otwartej strony na swoim iDevice, zobaczysz komunikat „Brak aplikacji do sprawdzenia”.

5. Teraz debuguj stronę, która jest otwarta w mobilnym Safari, tak jak 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ć javascript i sprawdzać wartości zmiennych w czasie wykonywania.

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

iDevice nie pojawia się w menu Develop w Safari?

  •  Wyczyść pamięć podręczną Safari i pliki cookie
  • Zaktualizuj Safari na komputerze Mac 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 jest to oryginalny kabel błyskawicy Apple lub kabel z certyfikatem MFI (Made For iPhone)
  • Sprawdź, czy Inspektor sieci jest włączony. Aktualizacje iOS czasami przełączają to z powrotem na domyślne ustawienie WYŁ. Dlatego po prostu sprawdź  Ustawienia> Safari> Zaawansowane> Inspektor sieci
    • Spróbuj wyłączyć Inspektora sieci, odczekaj 10 sekund i włącz go ponownie
  • Zamiast tego wypróbuj przeglądarkę Safari Technology Preview
  • Zamknij przeglądarkę Safari na komputerze Mac i uruchom ją ponownie. Sprawdź, czy przeglądarka Safari na komputerze Mac rozpoznaje Twoje urządzenie i umożliwia debugowanie
  • Sprawdź, czy nie korzystasz z trybu przeglądania prywatnego Safari, jeśli iDevice pojawia się tylko na chwilę w menu Develop 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 urządzenia iDevice z systemem iOS 6 lub starszym, przeglądarka internetowa Safari na Twoim urządzeniu ma własną wbudowaną konsolę debugowania! Po prostu uzyskaj dostęp do konsoli debugowania Safari, przechodząc do  Ustawienia > Safari > Deweloper > Konsola debugowania

Najnowsze posty