Jak debugować strony internetowe w Chrome na Androida na komputerze

Jako administrator bloga debuguję swoją osobistą stronę internetową za pomocą Chrome, aby zobaczyć, jak będą wyglądać zmiany w motywie i CSS, zanim zaimplementuję je na stałe na serwerze. Nie dawno nie płaciłem

uwagę na strony mobilne

ponieważ niewielu odwiedzających odwiedziło moją witrynę za pomocą smartfona. Jednak dziś znaczny odsetek odwiedzających to smartfony i tablety, dlatego też i tam konieczne stało się zadbanie o wygląd i prezentację.

Gdyby była to strona na komputerze, można by ją łatwo debugować za pomocą opcji z menu kontekstowego Chrome po kliknięciu prawym przyciskiem myszy, 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 swoim komputerze za pomocą Chrome na Androida i Android SDK.

Debugowanie strony internetowej

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

Przy pierwszym uruchomieniu Android SDK na komputerze zostaniesz poproszony o pobranie kilku interfejsów API i narzędzi. Jeśli 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 uruchom %userprofile%\AppData\Local\Android\android-sdk\platform-tools aby otworzyć katalog narzędzi platformy Android.

Krok 3: Teraz przytrzymaj Ctrl + Shift klawisz i kliknij prawym przyciskiem myszy w folderze, 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 sieci USB.

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 host: 9222 w przeglądarce Chrome na komputerze.

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

Wniosek

Jestem pewien, że ta sztuczka pomoże wielu twórcom stron internetowych zoptymalizować ich strony internetowe pod kątem smartfonów. Użyłem tej sztuczki 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, podziel się nim z nami.