Budując stronę lub aplikację webową, zawsze mamy za zadanie sprawdzić, czy wszystko działa poprawnie na urządzeniu mobilnym lub nawet tablecie. Jeśli pracujemy w fazie rozwoju, nie mamy jak tego sprawdzić, ponieważ najpierw musielibyśmy przesłać nasze zmiany na serwer, a tam sprawdzić je na naszym urządzeniu mobilnym.
Ale nie powinniśmy się martwić, ponieważ Google Chrome ma funkcję, która pozwala nam w kilku prostych krokach zweryfikować, jak nasza strona internetowa lub aplikacja działa na wybranym przez nas urządzeniu mobilnym.
1. Emuluj urządzenie mobilne w Google Chrome
Jak mówimy, Google Chrome zawiera narzędzie zorientowane na programistę, za pomocą którego możemy na pierwszy rzut oka uzyskać dostęp do wykluczonych opcji. Jednym z nich jest emulator urządzenia mobilnego w trybie urządzenia.
Krok 1
Na dole będziemy mieli menu, które zostanie wyświetlone, które pokazuje nam kod HTML strony. Aby wyświetlić panel programisty Chrome, przejdziemy do „Menu / Więcej narzędzi / Narzędzia programistyczne” lub wykonamy następującą kombinację klawiszy:
W systemach Windows i Linux
Ctrl + Shift + M
Na Macu
⇧ + ⌘ + M
Krok 2
Zobaczymy, że otworzy się panel kodu. Patrzymy na ikonę, która odpowiada „Trybowi urządzenia” i zostanie aktywowana, gdy pojawi się na niebiesko. Kliknij go, aby go aktywować.
Krok 3
Tam przechodzimy do górnego menu nad emulowaną stroną i wybieramy urządzenie, które chcemy emulować, w tym przypadku wybieramy Apple iPhone x i odświeżamy, aby zmiany zaczęły obowiązywać. Mamy szeroką gamę presetów skonfigurowanych tak, że jednym kliknięciem mamy nasz symulowany model.
Krok 4
Jeśli chcemy stworzyć niestandardowe pomiary, przejdziemy do miejsca, w którym pojawia się model terminala i klikniemy „Edytuj”.
Krok 5
Pojawią się te modele, które były wcześniej konfiguratorem lub możemy go dodać w spersonalizowany sposób, klikając „Dodaj urządzenie niestandardowe”.
Krok 6
W opcjach trybu urządzenia będziemy mieli możliwość aktywacji lub nie czujników symulujących ekran dotykowy.
NotatkaKliknij ikonę z trzema kropkami, aby wyświetlić m.in. opcję „Czujniki”
2. Emuluj łączność z siecią komórkową w Google Chrome
Stan sieci i jej testowanie dzięki Chrome pozwala nam testować naszą stronę internetową poprzez różne rodzaje połączeń sieciowych takich jak 3G a nawet bez połączenia.
Krok 1
Możemy również emulować sieć, w której się znajdujemy. Aby to zrobić, przechodzimy do zakładki „Sieć” i wybieramy typ sieci ze zwijanej listy.
Krok 2
Jeśli ustaliliśmy limit, zobaczymy ostrzeżenie, aby przypomnieć nam, że mamy włączone.
3. Dodaj limity łączności z siecią komórkową w Google Chrome
Krok 1
Ten limit jest ważny i możemy ustawić niestandardowe limity z warunkami skonfigurowanymi przez nas samych. Aby to zrobić, naciskamy następujący klawisz, aby otworzyć panel Ustawienia.
F1
Krok 2
Kliknij opcję „Ograniczanie”. Wybieramy możliwość "Dodaj niestandardowy profil".
Krok 3
Tutaj ustawimy ustawienia limitów w niestandardowy sposób.
4. Otwórz panel warunków sieciowych w Google Chrome
Mamy więcej opcji w panelu programisty w DevTools.
Krok 1
Aby to zrobić, przechodzimy do trzypunktowego menu po prawej stronie i klikamy „Więcej narzędzi” / „Warunki sieciowe”.
Krok 2
Stąd możemy włączyć lub wyłączyć pamięć podręczną i zmienić domyślnego agenta na niestandardowy.
Dzięki tej funkcjonalności nie będziemy już musieli szukać naszego telefonu komórkowego, aby sprawdzić, czy nasza strona internetowa lub aplikacja działa poprawnie, pozostaje tylko każdemu, aby trochę bardziej zapoznać się z tym narzędziem i wykorzystać go do skrócenia czasu testowania i wdrożenia.
