Wstęp
Jeśli jesteś programistą i chcesz korzystać z witryny na wiele urządzeń, prawdopodobnie musisz przetestować swoje witryny i aplikacje internetowe na różnych urządzeniach i w różnych konfiguracjach. Pomogą Ci w tym testy synchroniczne, które są skutecznym sposobem automatycznego wykonywania tej samej interakcji na wielu urządzeniach i w wielu przeglądarkach jednocześnie.
Testowanie zsynchronizowane może pomóc w rozwiązaniu dwóch szczególnie czasochłonnych problemów:
- Synchronizacja wszystkich urządzeń z adresem URL, który chcesz przetestować Ręczne ładowanie ich na każdym urządzeniu jest zbyt szybkie, zajmuje więcej czasu i ułatwia przeoczenie błędów.
- Synchronizowanie interakcji. Wczytywanie strony to świetny sposób na testowanie wizualne, ale do testowania interakcji warto też mieć możliwość synchronizowania przewijania, kliknięć i innych zachowań.
Na szczęście, jeśli masz dostęp do swoich urządzeń docelowych, możesz skorzystać z kilku narzędzi, które usprawniają przepływ informacji z komputera na komórki. W tym artykule przyjrzymy się Ghostlab, Remote Preview, Adobe Edge Audit i Grunt.
Narzędzia,
GhostLab (Mac)
Ghostlab to komercyjna aplikacja na komputery Mac (49 USD), która umożliwia synchronizację testów witryn i aplikacji internetowych na wielu urządzeniach. Przy minimalnej konfiguracji umożliwia to synchronizację:
- Kliknięcia
- Nawigacja
- Przewinięcia
- Wprowadzanie danych w formularzach (np.formularze logowania, rejestracja)
Bardzo ułatwia to testowanie wygody użytkowników witryny na różnych urządzeniach. Po otwarciu strony w przeglądarce na urządzeniu każda zmiana w nawigacji (w tym odświeżenie strony) powoduje, że wszystkie inne podłączone urządzenia są odświeżane natychmiast. Ghostlab obsługuje oglądanie katalogów lokalnych, więc odświeżanie będzie miało miejsce również wtedy, gdy zapiszesz zmiany w plikach lokalnych, aby wszystko było zawsze zsynchronizowane.
Konfiguracja Ghostlab to bezproblemowy proces. Aby rozpocząć, pobierz, zainstaluj i uruchom wersję próbną (lub pełną wersję, jeśli nie masz ochoty kupować). Połącz Maca i urządzenia, które chcesz przetestować, z tą samą siecią Wi-Fi, aby można było je wykryć.
Po uruchomieniu Ghostlab możesz kliknąć „+”, aby dodać adres URL do testów, lub przeciągnąć go z paska adresu przeglądarki. Możesz też przeciągnąć lokalny folder, który chcesz przetestować, do okna głównego. Zostanie utworzony nowy wpis witryny. W tym artykule testuję aktywną wersję strony http://html5rocks.com. I tak, proszę. ;
Potem możesz uruchomić nowy serwer Ghostlab, klikając przycisk odtwarzania „>” obok nazwy witryny. Spowoduje to uruchomienie nowego serwera dostępnego pod adresem IP właściwym dla Twojej sieci (np.http://192.168.21.43:8080).
Oto podłączyłem Nexusa 4 i wskazałem Chrome na Androida na adres IP podany przez Ghostlab. To wszystko, co muszę zrobić. Ghostlab nie wymaga instalowania osobnego klienta na urządzeniu, tak jak w przypadku innych rozwiązań. Dzięki temu możesz jeszcze szybciej rozpocząć testowanie.
Każde urządzenie podłączone do adresu URL Ghostlab zostanie dodane do listy połączonych klientów na pasku bocznym po prawej stronie głównego okna Ghostlab. Dwukrotne kliknięcie nazwy urządzenia powoduje wyświetlenie dodatkowych informacji, takich jak rozmiar ekranu czy system operacyjny. Teraz już wiesz, jak przetestować nawigowanie i synchronizację kliknięć. Hip hip hurra.
Ghostlab może też wyświetlać niektóre statystyki dotyczące połączonych urządzeń, takie jak ciąg znaków z UA, szerokość i wysokość widocznego obszaru, gęstość pikseli urządzeń czy współczynnik proporcji. W każdej chwili możesz ręcznie zmienić sprawdzany adres URL, klikając ikonę koła zębatego obok wpisu. Otworzy się okno konfiguracji, które wygląda tak:
Mogę teraz wybrać inne połączone urządzenia i kliknąć różne linki w HTML5Rocks, a nawigacja będzie synchronizowana zarówno na komputerze z Chrome (wpisanym pod tym samym adresem URL Ghostlab), jak i na wszystkich moich urządzeniach.
Jeszcze lepsze jest to, że Ghostlab udostępnia opcję przekazywania wszystkich linków przechodzących przez sieć przez serwer proxy. Dzięki temu zamiast kliknięcia adresu http://192.168.21.43:8080/www.html5rocks.com przechodzi się do www.html5rocks.com/en/performance.http://192.168.21.43/www.htm5rocks.com/en/performance
Aby włączyć tę funkcję, zaznacz opcję „Wczytywanie całej treści przez Ghostlab” na karcie „Wczytywanie treści”.
Jak to działa:
Ghostlab może wczytać dowolną liczbę witryn i okien w dowolnej obsługiwanej przeglądarce. Pozwala to nie tylko przetestować witrynę w różnych rozdzielczościach, ale też sposób działania kodu w różnych przeglądarkach i na różnych platformach. Hura!
Ghostlab pozwala skonfigurować konfigurację obszaru roboczego projektu, którego podgląd wyświetlasz, oraz określić, czy chcesz, aby zmiany w katalogu były monitorowane i odświeżane po wykryciu. Oznacza to, że zmiany powodują odświeżanie wszystkich połączonych klientów. Koniec z ręcznym odświeżaniem.
Być może zastanawiasz się, w czym jeszcze Ghostlab może pomóc? Choć nie jest to nóż szwajcarski, obsługuje też zdalną kontrolę kodu na połączonych urządzeniach. W głównym interfejsie dwukrotne kliknięcie nazwy urządzenia powinno wyświetlić opcję „debugowania”, która uruchomi wersję Narzędzi deweloperskich w Chrome, którą możesz wypróbować.
Jest to możliwe dzięki dołączonemu do pakietu zdalnego inspektora sieci Weinre, który pozwala debugować skrypty i zmieniać style na połączonych urządzeniach. Podobnie jak w przypadku zdalnego debugowania w Chrome na Androida możesz tutaj wybierać elementy oraz uruchamiać profilowanie wydajności i skrypty debugowania.
Byłam pod wrażeniem, jak szybko mogę używać Ghostlab do codziennych testów na różnych urządzeniach. Jeśli jesteś freelancerem, koszt licencji komercyjnej może być zbyt wysoki (zobacz poniżej więcej opcji). Jednak w przeciwnym razie polecam Ghostlab.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect jest częścią pakietu subskrypcji Adobe Creative Cloud, ale jest też dostępny w wersji próbnej. Pozwala ona obsługiwać w Chrome wiele urządzeń z iOS i Androidem (poprzez rozszerzenie do Chrome Edge Inspector). Dzięki temu gdy otwierasz określony URL, wszystkie podłączone urządzenia są zsynchronizowane.
Aby rozpocząć konfigurację, zarejestruj konto Adobe Creative Cloud lub zaloguj się na istniejące konto, jeśli je masz. Następnie pobierz i zainstaluj aplikację Edge Inspect ze strony Adobe.com (obecnie dostępna na Maca i Windows, ale nie w Linuksie – przepraszamy). Warto mieć pod ręką docs dotyczące inspekcji brzegowego.
Po zainstalowaniu musisz pobrać rozszerzenie inspekcji krawędzi do Chrome, które umożliwi synchronizację przeglądania między połączonymi urządzeniami.
Musisz też zainstalować klienta Edge Inspect na każdym urządzeniu, z którym chcesz synchronizować działania. Na szczęście są dostępne aplikacje na iOS, Androida i Kindle.
Po zakończeniu instalacji możemy zacząć sprawdzać nasze strony. Aby to działało, wszystkie urządzenia muszą być połączone z tą samą siecią.
Na komputerze uruchom Inspekcję Edge w Chrome, a następnie uruchom aplikację na swoich urządzeniach (patrz poniżej):
Na komputerze można teraz otworzyć witrynę taką jak HTML5Rocks.com, a urządzenie mobilne automatycznie otworzy tę samą stronę.
Obok nazwy urządzenia pojawi się też symbol <>, jak widać na zrzucie ekranu poniżej. Kliknięcie tego przycisku spowoduje uruchomienie instancji Weinre umożliwiającej sprawdzenie i debugowanie strony.
Weinre to przeglądarka i konsola DOM. Nie ma w niej funkcji z Narzędzi deweloperskich w Chrome, takich jak debugowanie JavaScriptu, profilowanie i kaskada sieci. Chociaż jest to absolutne minimum narzędzi dla programistów, przydaje się ono do dokładnego sprawdzania stanu DOM i JavaScriptu.
Rozszerzenie Edge Audit obsługuje również tworzenie zrzutów ekranu z połączonych urządzeń. Przydaje się do testowania układu lub po prostu pobierania przechwyconych stron i udostępniania ich innym.
Dla deweloperów, którzy płacą już za CC, Edge Audit jest doskonałym rozwiązaniem. Ma jednak kilka ograniczeń, na przykład każde urządzenie wymaga zainstalowania dedykowanego klienta i trochę dodatkowych czynności konfiguracyjnych, których możesz nie znaleźć w przypadku rozwiązań alternatywnych, takich jak Ghostlab.
Podgląd zdalny (Mac, Windows, Linux)
Podgląd zdalny to narzędzie typu open source pozwalające hostować strony HTML i treści, które mogą być wyświetlane na wielu urządzeniach.
Podgląd zdalny wykonuje wywołanie XHR co 1100 ms, aby sprawdzić, czy adres URL w pliku konfiguracji nie uległ zmianie. Jeśli okaże się, że tak, skrypt aktualizuje atrybut src elementu iframe wczytanego na stronie na poszczególnych urządzeniach i wczytując stronę na tym urządzeniu. Jeśli nie zostaną wykryte żadne zmiany, skrypt będzie kontynuował odpytywanie do momentu wprowadzenia zmiany.
Świetnie nadaje się to do łączenia urządzeń w łańcuch i łatwej zmiany adresu URL na nich wszystkich. Aby rozpocząć:
- Pobierz podgląd zdalny i przenieś wszystkie związane z nim pliki na serwer dostępny lokalnie. Może to być Dropbox, serwer programistyczny lub inny.
- Pobierz plik „index.html” z pobranego pliku na wszystkie urządzenia docelowe. Będzie ona używana jako sterownik i załaduje stronę, którą chcesz przetestować, za pomocą elementu iframe.
- Edytuj plik „url.txt” (zawarty w pliku do pobrania i wyświetlany na Twoim serwerze), podając adres URL, którego podgląd chcesz wyświetlić. Zapisz ten plik.
- Podgląd zdalny zauważy, że plik url.txt zmienił się, i odświeży wszystkie podłączone urządzenia, aby wczytać adres URL.
Podgląd zdalny jest funkcją lo-fi, a jej podgląd jest bezpłatny.
Grunt + Live-Upload (Mac, Windows, Linux)
Grunt (i Yeoman) to narzędzia wiersza poleceń używane do rusztowania i tworzenia projektów w interfejsie. Jeśli korzystasz już z tych narzędzi i masz skonfigurowaną aktualizację na żywo, możesz łatwo zaktualizować swój przepływ pracy, aby umożliwić testowanie na różnych urządzeniach, w których każda zmiana wprowadzona w edytorze powoduje ponowne załadowanie wszystkich urządzeń, na których uruchomiono aplikację lokalną.
Zapewne korzystasz z grunt server. Gdy jest uruchamiana z katalogu głównego projektu, monitoruje ona wszelkie zmiany w plikach źródłowych i automatycznie odświeża okno przeglądarki. To zasługa zadania grunt-contrib-watch, które uruchamiamy jako część serwera.
Jeśli zdarzyło Ci się użyć aplikacji Yeoman do uporządkowania projektu, zostanie w niej utworzony plik Gruntfile zawierający wszystko, co jest potrzebne do przeładowania na żywo aplikacji. Aby usługa działała na różnych urządzeniach, wystarczy zmienić jedną usługę, czyli hostname (na komputerze). Powinien znajdować się w sekcji connect. Jeśli zauważysz, że hostname jest ustawiony na localhost, po prostu zmień go na 0.0.0.0. Po kolejnym uruchomieniu grunt server powinno się otworzyć nowe okno z podglądem Twojej strony. URL prawdopodobnie będzie wyglądać tak: http://localhost:9000 (9000 to port).
Uruchom nową kartę lub nowy terminal i użyj funkcji ipconfig | grep inet, aby wykryć wewnętrzny adres IP systemu. Może wyglądać tak: 192.168.32.20. Ostatnim krokiem jest otwarcie przeglądarki takiej jak Chrome na urządzeniu, na którym chcesz zsynchronizować Livereload, i wpisanie tego adresu IP, a następnie numeru portu z wcześniejszego portu, np. 192.169.32.20:9000.
Znakomicie. Ponowne ładowanie na żywo powinno teraz powodować ładowanie plików źródłowych na komputerze i w przeglądarce na urządzeniu mobilnym. Świetnie!
Yeoman udostępnia też generator urządzeń mobilnych, który ułatwia konfigurację.
Emmet LiveStyle
Emmet LiveStyle to wtyczka do przeglądarki i edytora, która umożliwia edycję na żywo kodu CSS w środowisku programistycznym. Jest ona obecnie dostępna w przeglądarkach Chrome, Safari i Sublime Text oraz obsługuje edytowanie dwukierunkowe (za pomocą edytora w przeglądarce i odwrotnie).
Emmet LiveStyle nie wymusza pełnego odświeżenia przeglądarki po wprowadzeniu zmian, ale przenosi zmiany CSS przez protokół debugowania zdalnego Narzędzi deweloperskich. Oznacza to, że zmiany wprowadzone w edytorze na komputerze są widoczne w każdej połączonej wersji Chrome – zarówno w Chrome na komputerze, jak i w Chrome na Androida.
LiveStyle ma tak zwany tryb widoku łączonego, który doskonale nadaje się do testowania elastycznych projektów w różnych oknach i na różnych urządzeniach. W trybie widoku łączonego wszystkie aktualizacje edytora są stosowane we wszystkich oknach, podobnie jak aktualizacje Narzędzi deweloperskich dla tej samej strony.
Aby zacząć korzystać z edytowania kodu CSS w czasie rzeczywistym po zainstalowaniu pakietu LiveStyle:
- Uruchom aplikację Sublime Text i otwórz plik CSS w projekcie
- Uruchom Chrome i otwórz stronę z usługą porównywania cen, którą chcesz edytować.
- Otwórz Narzędzia deweloperskie i przejdź do panelu LiveStyle. Zaznacz opcję „Włącz LiveStyle”. Uwaga: aby można było zastosować aktualizacje stylu, Narzędzia deweloperskie muszą być otwarte podczas sesji edycji na żywo dla każdego okna.
- Po włączeniu tej funkcji po lewej stronie będzie wyświetlana lista arkuszy stylów, a po prawej – lista plików edytora. Wybierz plik edytora, który chcesz powiązać z przeglądarką. Znakomicie. Na wysięgniku
Teraz lista plików edytorów będzie automatycznie aktualizowana podczas edytowania, tworzenia, otwierania i zamykania plików.
Podsumowanie
Testowanie na różnych urządzeniach to wciąż nowy i dynamicznie rozwijający się obszar, w którym przygotowujemy wiele nowych kont. Na szczęście istnieje wiele bezpłatnych i komercyjnych narzędzi, które pozwalają sprawdzać zgodność i testować różne urządzenia.
Mimo to wciąż możemy polepszyć ten obszar, dlatego zachęcamy do zastanowienia się nad dalszym udoskonaleniem narzędzi do testowania na różnych urządzeniach. Każda opcja, która skraca czas konfiguracji i usprawnia przepływ pracy na różnych urządzeniach, jest niezwykle przydatna.
Problemy
Być może największy problem, z jakim miałem do czynienia podczas testowania tych narzędzi, dotyczył regularnego usypiania urządzeń. Nie jest to naruszenie umowy, ale po pewnym czasie może być irytujące. Jeśli to możliwe, warto ustawić urządzenia w trybie uśpienia jako obejście problemu, ale pamiętaj, że może to powodować rozładowywanie baterii, jeśli nie są stale podłączone do zasilania.
W GhostLab nie wystąpiły żadne poważne problemy. Cena niektórych produktów w wysokości 49 USD może być nieco wyższa, ale pamiętaj, że jeśli korzystasz z tej usługi regularnie, płaci się więcej lub mniej. Jedną z największych zalet konfiguracji jest brak konieczności instalowania klienta i zarządzania nim na poszczególnych urządzeniach docelowych. Ten sam adres URL działa wszędzie.
Instalowanie i używanie konkretnych klientów na każdym urządzeniu było trochę uciążliwe. Zauważyłem też, że nie wszystkie połączone klienty były odświeżane regularnie, co oznaczało, że musiałem to robić samodzielnie przy użyciu rozszerzenia do Chrome. Wymaga też subskrypcji Creative Cloud i ogranicza się do wczytywania witryn w kliencie, a nie w wybranej przeglądarce na urządzeniu. Może to ograniczyć zdolność do dokładnego testowania.
Podgląd zdalny działa zgodnie z reklamą, ale jest wyjątkowo lekki. Oznacza to coś więcej niż tylko odświeżanie witryny na różnych urządzeniach – potrzebujesz bardziej zaawansowanych opcji narzędzi. Nie będzie na przykład synchronizować kliknięć ani przewijania.
Rekomendacje
Jeśli szukasz bezpłatnego, działającego na wielu platformach rozwiązania, zalecamy skorzystanie z podglądu zdalnego. Dla osób pracujących w firmie, która szuka płatnych rozwiązań, GhostLab ma w sobie doskonały poziom doświadczenia, ale jest dostępny tylko na komputery Mac. Dla użytkowników Windowsa Adobe Edge Inspect
Grunt i LiveStyle doskonale sprawdzą się też podczas tworzenia aplikacji.