Jak debugować strony internetowe w Chrome na Androida na komputerze?

Jako administrator bloga debuguję swoją osobistą witrynę internetową za pomocą Chrome, aby zobaczyć, jak będą wyglądały zmiany w motywie i CSS, zanim zaimplementuję je na stałe na serwerze. Jeszcze nie tak dawno, kiedy nigdy nie zapłaciłem

uwaga na strony mobilne

ponieważ tylko nieliczni użytkownicy odwiedzili moją witrynę za pomocą smartfona. Ale dzisiaj znaczny odsetek odwiedzających stanowią smartfony i tablety, dlatego też konieczne stało się zadbanie o wygląd i prezentację również tam.

Gdyby była to strona na komputerze, można by ją łatwo debugować za pomocą opcji z menu kontekstowego Chrome, ale nie jest to opcja w przypadku stron na urządzeniach mobilnych. Więc dzisiaj pokażę ci, jak możesz debugować mobilne strony internetowe na komputerze przy użyciu Chrome na Androida i Android SDK.

Debugowanie strony internetowej

Krok 1: Ściągnij i zainstaluj Android SDK na swoim komputerze i uruchom go. Instalator poprosi Cię o pobranie Javy, jeśli nie masz jej zainstalowanej.

Gdy po raz pierwszy uruchomisz Android SDK na swoim komputerze, zostaniesz poproszony o pobranie kilku interfejsów API i narzędzi. Jeśli Twoim jedynym celem instalacji Android SDK jest debugowanie stron, odznacz wszystko oprócz

Narzędzia platformy Android SDK i kliknij Zainstaluj pakiet przycisk.

Krok 2: Po zainstalowaniu narzędzi platformy Android otwórz Run Box (Windows+R) i biegnij %userprofile%\AppData\Local\Android\android-sdk\platform-tools aby otworzyć katalog narzędzi platformy Android.

Krok 3: Teraz przytrzymaj klawisz Ctrl + Shift i kliknij prawym przyciskiem myszy folder, aby otworzyć tam wiersz polecenia. Możesz także otworzyć wiersz polecenia za pomocą pola Uruchom i ręcznie przejść do folderu.

Krok 4: Po wykonaniu tej czynności otwórz Chrome na telefonie z Androidem, otwórz Ustawienia—>Narzędzia programistyczne i zaznacz opcję Włącz debugowanie USB Web.

Krok 5: Teraz w wierszu polecenia uruchom polecenie adb forward TCP: 9222 localabstract: chrome_devtools_remote i otwórz przeglądarkę Chrome w systemie Windows po pomyślnym wykonaniu.

Krok 6: Otwórz stronę, którą chcesz debugować w przeglądarce Chrome na Androida i otwórz adres URL Lokalny Gospodarz: 9222 w przeglądarce Chrome na komputerze.

To wszystko, zobaczysz wszystkie strony otwarte w przeglądarce Androida jako miniatury na twoim komputerze. Aby otworzyć stronę debugowania, po prostu kliknij odpowiednią miniaturę witryny. Będziesz mógł śledzić zmiany debugowania wprowadzane na komputerze bezpośrednio w systemie Android w czasie rzeczywistym.

Wniosek

Jestem pewien, że ta sztuczka pomoże wielu programistom internetowym zoptymalizować ich strony internetowe pod kątem smartfonów. Użyłem tego triku do skonfigurowania moich stron internetowych i zadziałało to jak urok. Jeśli jednak znasz lepszy sposób debugowania stron internetowych smartfonów na komputerze, udostępnij go nam.

Ostatnia aktualizacja 03.02.2022 r.

Powyższy artykuł może zawierać linki afiliacyjne, które pomagają we wspieraniu Guiding Tech. Nie wpływa to jednak na naszą rzetelność redakcyjną. Treść pozostaje bezstronna i autentyczna.