Jak debugować strony internetowe na Chrome dla Androida na komputerze

Jako administrator bloga debuguję swoją osobistą witrynę za pomocą Chrome, aby zobaczyć, jak wyglądałyby zmiany w motywie i CSS, zanim zostaną trwale wprowadzone na serwerze. Nie tak dawno temu, kiedy nigdy nie zwracałem uwagi na strony mobilne, ponieważ tylko niewielu odwiedzających odwiedzało moją witrynę za pomocą smartfona. Ale dziś znaczny odsetek odwiedzających stanowią smartfony i tablety, dlatego też konieczne stało się zadbanie również o wygląd i prezentację.

Gdyby była to strona na komputerze, można ją łatwo debugować, korzystając z opcji z menu kontekstowego Chrome klikniętego prawym przyciskiem myszy, ale nie jest to opcja w przypadku stron na urządzeniach mobilnych. Dzisiaj pokażę, jak można debugować mobilne strony internetowe na komputerze za pomocą Chrome na Androida i Androida SDK.

Debugowanie strony internetowej

Krok 1: Pobierz i zainstaluj zestaw Android SDK na swoim komputerze i uruchom go. Instalator poprosi o pobranie oprogramowania Java, jeśli go nie masz.

Podczas pierwszego uruchomienia zestawu Android SDK na komputerze pojawi się monit o pobranie kilku interfejsów API i narzędzi. Jeśli jedynym celem instalacji zestawu SDK systemu Android jest debugowanie stron, usuń zaznaczenie wszystkiego oprócz narzędzi platformy Android SDK i kliknij przycisk Zainstaluj pakiet.

Krok 2: Po zainstalowaniu narzędzi platformy Android otwórz okno Uruchom (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 i kliknij folder prawym przyciskiem myszy, aby otworzyć 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 dla programistów i zaznacz opcję Włącz debugowanie USB przez sieć 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 localhost: 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 komputerze bezpośrednio na Androidzie w czasie rzeczywistym.

Wniosek

Jestem pewien, że ta sztuczka pomoże wielu programistom zoptymalizować swoje strony pod kątem smartfonów. Użyłem tej sztuczki, aby skonfigurować moje strony internetowe 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.