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ść. 🙂

Firefox – narzędzia dla programistów zamiast Firebuga

Dopiero niedawno dowiedziałem się, że popularny dodatek do Firefoksa – Firebug – jest już od jakiegoś czasu martwy. Autorzy zalecają używanie narzędzi dla programistów wbudowanych w Firefoksa.

Mając świadomość, że z czasem pojawią się problemy (a jeden wystąpił już kilka miesięcy temu, gdy chciałem podejrzeć ruch generowany przez websockety), usunąłem Firebuga i zacząłem korzystać z wbudowanych narzędzi. Jak na przesiadkę z narzędzia, którego używam co najmniej od 5 lat, proces przebiegł zaskakująco łatwo.

Wbudowane narzędzia dla programistów na pierwszy rzut oka są według mnie nieco ładniejsze od Firebuga. Inspektor oraz wyróżnianie nim elementów jest czytelniejsze. Edycja drzewa DOM jest łatwiejsza, zaś zdarzenia JS (które w Firebugu były dość mocno zakamuflowane)  są teraz oznaczone tagiem “ev” przy elemencie, pod który są podpięte.

Na uwagę zasługuje też narzędzie do badania wydajności oraz przebudowany panel “Sieć”, który wyświetla szczegóły żądań w wygodniejszy sposób. Prezentuje on też dane przesyłane przez websockety, czego brakowało Firebugowi.

Narzędzia dla programistów z Firefoksa posiadają też kilka nowych funkcji. Mnie w oczy rzucił się “Brudnopis” otwierany w osobnym oknie (a nie jako część panelu konsoli) oraz wygodny “Próbnik koloru”, automatycznie kopiujący do schowka kod koloru wskazanego piksela. Nie może tu zabraknąć też narzędzia: “Widok trybu responsywnego”, który ułatwia rozwijanie aplikacji z responsywnym layoutem.

Podsumowując – polecam. Przesiadka jest praktycznie bezbolesna, a warto choćby ze względu na wymienione wyżej nowości i usprawnienia.