Jak testować strony responsywne? Przegląd narzędzi i 3 złote zasady.

Jak testować strony responsywne? Przegląd narzędzi i 3 złote zasady.

O rozbieżnościach w interpretowaniu dokumentów hipertekstowych przez przeglądarki nikogo informować nie trzeba. Dobrze wykonana strona powinna zapewnić pełne wsparcie dla wiodących urządzeń i systemów operacyjnych. Dziś opowiem jak testować strony responsywne oraz jak sobie poradzić gdy nadejdzie „u mnie działa” moment. Pokażę wam narzędzia, które nie raz uratowały mi skórę.

Widok responsywny

W codziennej pracy oczywiste jest korzystanie z wbudowanego debuggera w przeglądarce. Najlepsze tego typu narzędzia dostarczają Webkit i Firefox. Widok responsywny na OSX dostępny jest pod skrótem „CMD+ALT+I”. Mamy możliwość skalowania okna do pożądanego rozmiaru jednym kliknięciem. Szerokość i wysokość można definiować również ręcznie, co nie różni się od zwykłego zmniejszania rozmiaru okna.

Browserstack i inne

Na rynku dostępne jest przynajmniej kilka aplikacji pozwalających zdalnie uruchomić wirtualną maszynę. Są to między innymi Browserstack, Sauce Labs, Mobilizer czy Cross Browser Testing. Usługi tego typu są zazwyczaj płatne więc należy dobrze przemyśleć ich zakup.

Niezaprzeczalną zaletą takich narzędzi jest dostępność dużej ilości urządzeń a także rzeczywiste rezultaty. Widoki z symulatora mogą często różnić się od tego co otrzymamy na fizycznym urządzeniu. Browserstack uruchamia rzeczywiste środowisko zatem mamy pewność, że widok nie będzie przekłamany. Wizualizacja urządzenia nie działa zbyt płynnie, jednak umożliwia skuteczne wychwycenie i naprawienie ewentualnych błędów.

Zdalne testowanie Chrome Inspector

Narzędzie dostarczone od Google pod hasłem Remote Debugging Android Devices” to dobre rozwiązanie gdy posiadamy fizyczne urządzenie z systemem Android. Aby sterować stroną załadowaną w telefonie, należy podłączyć go do komputera przez złącze USB i włączyć tryb programistyczny w ustawieniach. W Google Chrome pod adresem chrome://inspect uzyskamy dostęp do konsoli i inspektora.

Odpowiednik takiego narzędzia mają również użytkownicy sprzętu Apple. Dostępne jest ono w przeglądarce Safari po wcześniejszym podłączeniu smartphone do komputera.

Synchronizacja przeglądarek

Ciekawą opcją, z której korzystam na co dzień jest Browsersync. Jego zadaniem jest synchronizacja adresu IP w sieci lokalnej. Dzięki temu pod jednym adresem np. http://192.168.0.31:9000 mamy dostęp do localhosta, który serwuje dane strony. Adresu można używać na każdym urządzeniu podłączonym do sieci lokalnej.

Symulator iOS

Dystrybutor Xcode udostępnia symulator urządzeń Apple. Z uwagi na fakt, że narzędzie jest darmowe warto rozważyć jego instalację. Szczególnie gdy realizujemy projekty zza granicy, gdzie urządzenia mobilne od Apple, mają znacznie większy udział w rynku.

Do wyboru mamy kilka popularnych urządzeń. W aplikacji znajdziemy między innymi emulatory iPhone 4s w górę oraz iPad Air i Pro.

Zdalny inspektor weinre

Na koniec nieco archaiczne z pozoru narzędzie. Weinre to wtyczka JavaScript umożliwiająca testowanie na zdalnym urządzeniu. Nic w tym nowego gdyby nie fakt, że działa również w natywnych przeglądarkach.

Po podłączeniu urządzenia do komputera i uruchomieniu skryptu weinre na stronie, mamy dostęp do debuggera pod adresem: http://xx.xx.xx.xx:8080/client.

Jak testować strony responsywne?

RWD na stałe zakorzenił się w pracy front-end developerów tak więc wiedza na temat jak testować strony responsywne zdaje się być niezbędną. Ze względu na niezliczoną ilość urządzeń mobilnych, testowanie stron internetowych sprawia czasem nie lada wyzwanie. Dzięki dostępnym narzędziom, jesteśmy w stanie znaleźć przyczynę błędu i ją wyeliminować go.

Na koniec 3 złote zasady, którymi kieruję się w przy każdym projekcie:

  1. Testuj na fizycznych urządzeniach  w miarę możliwości. Nic innego nie daje tak rzeczywistych rezultatów. Wyświetlając stronę na telefonie czy tablecie sprawdzisz przy okazji jak zachowują się elementy nawigacji, animacje i czy ogólny odbiór jest na plus.
  2. Zainwestuj w narzędzie do Cross Browser Check”. Jeżeli wdrażanie projektów www to Twoja codzienność warto wydać kilkanaście dolarów miesięcznie i mieć do dyspozycji środowisko do testów z prawdziwego zdarzenia.
  3. Rozważnie korzystaj z symulatorów. Miej na uwadze, że widok strony generowany przez różnego rodzaju symulatory może różnić się od tego, który otrzymamy na fizycznym urządzeniu.

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.