Remote debugging web pages with weinre

Ostatnio pisałem aplikację mobilną używając frameworka Sencha Touch. Aplikacja miała ładne niebieskie tło dzięki użytemu zdjęciu :-). Testowałem aplikacje lokalnie na laptopie używając przeglądarki chrome oraz emulatora Ripple i wszystko wyglądało super. Zainstalowałem aplikację na tablecie z androidem i po uruchomieniu aplikacji ku mojemu zdziwieniu, aplikacja miała białe tło i ani śladu po moim ładnym niebieskim obrazku w tle :-(.... I co teraz?? Jak sprawdzić w czym leży problem. Na laptopie w przeglądarce włączę sobie narzędzie do debugowania np.: firebuga na friefoxie lub developer tools na chromie, ale na tablecie nie ma takiej możliwości..... Na szczęście nie wszystko stracone i nie trzeba kombinować metodą prób i błędów a wszystko dzięki narzędziu weinre przeznaczonemu do zdalnego debugowania aplikacji webowych czyli pracując na laptopie możesz debugować aplikację webową odpaloną na twoim tablecie lub telefonie.

Weinre jest aplikacją napisaną w node.js, dlatego do jej instalacji potrzebujemy zainstalowanego środowiska node. Samą aplikację weinre instaluje sie używając poniższej komendy


Sprawdźmy czy aplikacja zainstalowała się poprawnie wpisując komendę weinre ?

Wszystko wygląda dobrze. Podczas użytkowania aplikacji weinre w interakcje wchodzą trzy programy:

• debug server - serwer http odpalany przez komendę weinre 
• debug client - interfejs www do debugowania zdalnej aplikacji 
• debug target - jest to aplikacja webowa którą chcesz debugować, przeważnie będzie to aplikacja uruchomiona na urządzeniu mobilnym.  

Zatem odpalmy nasz debug serwer po przez poniższą komendę.

Aplikację uruchomiłem z dwiema opcjami

• pierwsza opcja --httpPort ustawia port na którym będzie działać debug serwer
• kolejna opcja to --boundHost którą należy ustawić na wartość -all-, aby weinre nasłuchiwał na wszystkich adresach sieciowych. Dzięki temu nasza aplikacja uruchomiona na urządzeniu mobilnym będzie się mogła połączyć z naszym desktopem/laptopem.

Po wykonaniu powyższej komendy otwieramy przeglądarkę i wpisujemy adres http://localhost:8081 i jeżeli nie było żadnych problemów powinniśmy zobaczyć zgłoszenie się serwera weinre

• W sekcji Access Points widać adres url do aplikacji webowej służącej do debugowania naszej aplikacji
• Natomiast w sekcji Target Script znajduje się skrypt który należy osadzić na stronie którą chce się debugować. Oczywiście należy zamienić nazwę localhost na adres ip maszyny na której uruchomiliśmy serwer do debugowania.

Po wejściu na adres http://localhost:8081/client/#anonymous dostajemy interfejs zbliżony do narzędzi debugowania znanych z chroma lub z safarii.

Ponieważ na tą chwilę nie uruchomiłem żadnej aplikacji do debugowania sekcja Targets jest pusta.

Natomiast po odpaleniu aplikacji na tablecie, na laptopie widzę informację o podłączanym urządzeniu.

W tym momencie możemy przystąpić do debugowania aplikacji, możemy wejść w zakładkę Elements, aby podejrzeć strukturę strony oraz użyte style. Możemy wyświetlić konsolę, aby zobaczyć jakieś zgłoszenia z naszej aplikacji lub wykonać jakiś prosty kod js.

Narzędzie weinre nie rozwiąże wszystkich naszych bolączek ale jest zdecydowania narzędziem bardzo pomocnym zwłaszcza jeżeli piszemy mobilne aplikacje webowe. Po więcej szczegółów odnośnie samego weinre odsyłam do strony projektu http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html