Prilikom izrade web stranice ili web aplikacije uvijek imamo zadatak provjeriti radi li sve ispravno na mobilnom uređaju ili čak tabletu. Ako radimo na razvoju, nemamo kako to provjeriti, jer bismo prvo morali poslati svoje promjene na poslužitelj i tamo to konzultirati na svom mobilnom uređaju.
No ne trebamo se brinuti jer Google Chrome ima funkcionalnost koja nam omogućuje da pomoću nekoliko jednostavnih koraka provjerimo kako naša web stranica ili aplikacija radi na mobilnom uređaju koji želimo.
1. Oponašajte mobilni uređaj u pregledniku Google Chrome
Kao što kažemo, Google Chrome uključuje alat usmjeren na razvojne programere s kojim možemo na prvi pogled pristupiti isključenim opcijama. Jedan od njih je emulator mobilnih uređaja u načinu rada uređaja.
Korak 1
Na dnu ćemo imati izbornik koji će biti prikazan, a koji nam prikazuje HTML kôd stranice. Da bismo prikazali Chromeovu ploču za razvojne programere, otići ćemo na "Izbornik / Više alata / Alati za razvojne programere" ili ćemo napraviti sljedeću kombinaciju tipki:
Na sustavima Windows i Linux
Ctrl + Shift + M
Na Macu
⇧ + ⌘ + M
Korak 2
Vidjet ćemo da se otvara ploča s kodom. Gledamo ikonu koja odgovara "načinu rada uređaja" i koja će se aktivirati kada se pojavi plavom bojom. Kliknite na nju da biste je aktivirali.
Korak 3
Dok tamo idemo na gornji izbornik iznad emulirane stranice i odabiremo uređaj koji želimo oponašati, u ovom slučaju odabiremo Apple iPhone x i osvježimo ga kako bi promjene stupile na snagu. Imamo širok izbor unaprijed postavljenih postavki tako da jednim klikom imamo naš simulirani model.
Korak 4
Ako želimo stvoriti prilagođena mjerenja, otići ćemo do mjesta gdje se pojavljuje terminalni model i kliknuti na "Uredi".
Korak 5
Pojavit će se oni modeli koji su prethodno bili konfiguratori ili ih možemo dodati na prilagođen način klikom na "Dodaj prilagođeni uređaj".
Korak 6
U opcijama unutar Device Mode -a imat ćemo mogućnost aktiviranja ili ne aktiviranja senzora koji simuliraju zaslon osjetljiv na dodir.
BilješkaPritisnite ikonu s tri točke da biste među ostalim prikazali opciju "Senzori"
2. Oponašajte povezivanje s mobilnom mrežom u Google Chromeu
Stanje mreže i njezino testiranje zahvaljujući Chromeu omogućuje nam testiranje naše web stranice kroz različite vrste mrežnih veza, poput 3G, pa čak i bez veze.
Korak 1
Također možemo oponašati mrežu u kojoj se nalazimo. Da bismo to učinili, idemo na karticu "Mreža" i odabiremo vrstu mreže na popisu koji se može sklopiti.
Korak 2
Ako smo postavili ograničenje, vidjet ćemo upozorenje koje će nas podsjetiti da smo ga omogućili.
3. Dodajte ograničenja povezivanju mobilne mreže u Google Chromeu
Korak 1
Ovo ograničenje je važno i možemo postaviti prilagođena ograničenja sa uvjetima koje smo sami konfigurirali. Da bismo to učinili, pritisnemo sljedeću tipku da otvorimo ploču Postavke.
F1
Korak 2
Kliknite na opciju "Throttling". Odabiremo mogućnost "Dodaj prilagođeni profil".
Korak 3
Ovdje ćemo postaviti postavke ograničenja na prilagođeni način.
4. Otvorite ploču s mrežnim uvjetima u Google Chromeu
Imamo više mogućnosti unutar razvojne ploče u DevTools -u.
Korak 1
Da bismo to učinili, idemo na izbornik s tri točke s desne strane i kliknite na "Više alata" / "Mrežni uvjeti".
Korak 2
Odavde možemo omogućiti ili onemogućiti predmemoriju i promijeniti zadani agent u prilagođeni.
S ovom funkcijom više nećemo morati tražiti svoj mobitel kako bismo provjerili radi li naša web stranica ili aplikacija ispravno, svima ostaje samo još malo istražiti ovaj alat i koristiti ga za skraćivanje vremena testiranja i implementacije.
