Chrome dla Androida – zdalne debugowanie aplikacji webowej

Dostosowujemy ostatnio aplikację webową do urządzeń mobilnych. Pierwszym pytaniem, które mi się nasunęło, było: “czy przeglądarki mobilne mają w ogóle wbudowane narzędzia deweloperskie?”. Odpowiedź w uproszczeniu brzmi: nie. W tym sensie, że nie uruchomimy tych narzędzi bezpośrednio na urządzeniu, co zresztą byłoby dość kłopotliwe ze względu na ich złożoność.

Krótkie przeszukiwanie internetu naprowadziło mnie na informacje o zdalnym debugowaniu. Brzmiało zbyt pięknie, aby było możliwe bez większego wysiłku. Pracuję na Linuksie, więc już sobie wyobrażałem rozwiązywanie problemów z połączeniem. Postanowiłem jednak przebić się przez ten krótki opis. Efekty były zaskakujące.

Okazało się, że w zasadzie wszystko działa out of the box. Po stronie komputera nie wymagało w zasadzie żadnej konfiguracji – urządzenie było widoczne od razu na liście. Zmian wymagały jedynie ustawienia na telefonie/tablecie.

Ale po kolei: na początku musimy włączyć debugowanie USB w opcjach programisty. W moim telefonie ze starszym Androidem 4.1.2 opcje programisty dostępne są bezpośrednio z ustawień:

Na nowszych należy je uaktywnić poprzez siedmiokrotne stuknięcie w “Build number” (zgodnie z opisem).

Po włączeniu debugowania USB, wystarczy podłączyć urządzenie kablem USB do komputera oraz włączyć Chrome na obu urządzeniach. Na komputerze wystarczy teraz włączyć narzędzia dla programistów (CTRL+SHIFT+I) i z menu wybrać: More tools -> Remote devices:

Na liście powinniśmy zobaczyć podłączone urządzenie. Po kliknięciu możemy wpisać adres do otwarcia na nim w nowej karcie lub debugować którąś z już otwartych kart na urządzeniu mobilnym poprzez kliknięcie na: “Inspect” przy jej nazwie. Pojawi się wtedy nowe okno z podglądem widoku strony na urządzeniu mobilnym oraz panel z narzędziami developerskimi. Zmiany wykonane na urządzeniu widoczne są w podglądzie na komputerze i vice versa:

Z takimi możliwościami rozwijanie aplikacji webowych na urządzenia mobilne to czysta przyjemność. 🙂