Când construim un site web sau o aplicație web, avem întotdeauna sarcina de a verifica dacă totul funcționează corect pe un dispozitiv mobil sau chiar pe o tabletă. Dacă lucrăm în dezvoltare, nu avem cum să o verificăm, deoarece ar trebui mai întâi să trimitem modificările noastre către server și să le consultăm acolo pe dispozitivul nostru mobil.
Dar nu ar trebui să ne facem griji, deoarece Google Chrome are o funcționalitate care ne permite cu câțiva pași simpli să verificăm modul în care funcționează site-ul sau aplicația noastră pe dispozitivul mobil pe care îl dorim.
1. Emulați dispozitivul mobil în Google Chrome
După cum spunem, Google Chrome încorporează un instrument orientat către dezvoltatori cu ajutorul căruia putem accesa dintr-o privire opțiunile excluse. Unul dintre ele este emulatorul de dispozitive mobile în modul dispozitiv.
Pasul 1
Vom avea un meniu în partea de jos care va fi afișat, care ne arată codul HTML al paginii. Pentru a afișa panoul dezvoltatorului Chrome vom merge la „Meniu / Mai multe instrumente / Instrumente pentru dezvoltatori” sau vom face următoarea combinație de taste:
Pe Windows și Linux
Ctrl + Shift + M
Pe Mac
⇧ + ⌘ + M
Pasul 2
Vom vedea că se deschide un panou de coduri. Ne uităm la pictograma care corespunde „Modului dispozitivului” și care va fi activată atunci când apare în albastru. Faceți clic pe acesta pentru ao activa.
Pasul 3
Când suntem acolo, mergem în meniul de sus de deasupra paginii emulate și selectăm dispozitivul pe care dorim să-l imităm, în acest caz selectăm Apple iPhone x și reîmprospătăm pentru ca modificările să aibă efect. Avem o mare varietate de presetări configurate, astfel încât într-un singur clic avem modelul nostru simulat.
Pasul 4
Dacă dorim să creăm măsurători personalizate, vom merge acolo unde apare modelul terminalului și vom face clic pe „Editare”.
Pasul 5
Vor apărea acele modele care au fost configurate anterior sau putem adăuga unul în mod personalizat făcând clic pe „Adăugare dispozitiv personalizat”.
Pasul 6
În opțiunile din modul dispozitiv vom avea posibilitatea de a activa sau nu senzorii care simulează un ecran tactil.
NotăFaceți clic pe pictograma cu trei puncte pentru a afișa, printre altele, opțiunea „Senzori”
2. Emulați conectivitatea rețelei mobile în Google Chrome
Starea rețelei și testarea acesteia datorită Chrome ne permite să testăm site-ul nostru web prin diferite tipuri de conexiuni de rețea, cum ar fi 3G și chiar fără conexiune.
Pasul 1
De asemenea, putem emula rețeaua în care ne aflăm. Pentru a face acest lucru, mergem la fila „Rețea” și selectăm un tip de rețea în lista pliabilă.
Pasul 2
Dacă am stabilit o limită, vom vedea o notificare de avertizare pentru a ne reaminti că o avem activată.
3. Adăugați limite la conectivitatea rețelei mobile în Google Chrome
Pasul 1
Această limită este importantă și putem seta limite personalizate cu condiții configurate de noi înșine. Pentru a face acest lucru, apăsăm următoarea tastă pentru a deschide panoul Setări.
F1
Pasul 2
Faceți clic pe opțiunea „Limitare”. Selectăm posibilitatea „Adăugare profil personalizat”.
Pasul 3
Aici vom seta setările limitelor într-un mod personalizat.
4. Deschideți panoul de condiții de rețea în Google Chrome
Avem mai multe opțiuni în panoul de dezvoltatori din DevTools.
Pasul 1
Pentru a face acest lucru, mergem la meniul cu trei puncte din partea dreaptă și facem clic pe „Mai multe instrumente” / „Condiții de rețea”.
Pasul 2
De aici putem activa sau dezactiva memoria cache și putem schimba agentul implicit la unul personalizat.
Cu această funcționalitate, nu va mai trebui să căutăm dispozitivul nostru mobil pentru a testa dacă site-ul sau aplicația noastră funcționează corect, rămâne doar pentru toată lumea să exploreze puțin mai mult acest instrument și să îl folosească pentru a scurta timpii de testare și implementare.
