Bij het bouwen van een website of webapplicatie hebben we altijd de taak om te controleren of alles correct werkt op een mobiel apparaat of zelfs een Tablet. Als we in ontwikkeling zijn, hebben we niet hoe we het moeten controleren, omdat we onze wijzigingen eerst naar de server moeten sturen en het daar op ons mobiele apparaat moeten raadplegen.
Maar we hoeven ons geen zorgen te maken, aangezien Google Chrome een functionaliteit heeft waarmee we met een paar eenvoudige stappen kunnen verifiëren hoe onze website of applicatie werkt op het mobiele apparaat dat we willen.
1. Emuleer mobiel apparaat in Google Chrome
Zoals we al zeiden, bevat Google Chrome een op ontwikkelaars gerichte tool waarmee we in één oogopslag toegang hebben tot uitgesloten opties. Een daarvan is de Mobile Device Emulator in Device Mode.
Stap 1
We zullen onderaan een menu hebben dat wordt weergegeven, dat ons de HTML-code van de pagina laat zien. Om het Chrome-ontwikkelaarspaneel te tonen, gaan we naar "Menu / Meer tools / Ontwikkelaarstools" of we doen de volgende combinatie van toetsen:
Op Windows en Linux
Ctrl + Shift + M
Op Mac
⇧ + ⌘ + M
Stap 2
We zullen zien dat er een codepaneel wordt geopend. We kijken naar het pictogram dat overeenkomt met de "Apparaatmodus" en dat wordt geactiveerd wanneer het blauw verschijnt. Klik erop om het te activeren.
Stap 3
Terwijl we daar zijn, gaan we naar het hoofdmenu boven de geëmuleerde pagina en selecteren we het apparaat dat we willen emuleren, in dit geval selecteren we Apple iPhone x en vernieuwen zodat de wijzigingen van kracht worden. We hebben een grote verscheidenheid aan voorinstellingen geconfigureerd, zodat we met één klik ons gesimuleerde model hebben.
Stap 4
Als we aangepaste metingen willen maken, gaan we naar waar het terminalmodel verschijnt en klikken op "Bewerken".
Stap 5
De modellen die eerder configurator waren, verschijnen of we kunnen er een op een gepersonaliseerde manier toevoegen door op "Aangepast apparaat toevoegen" te klikken.
Stap 6
In de opties binnen de apparaatmodus hebben we de mogelijkheid om de sensoren die een aanraakscherm simuleren, al dan niet te activeren.
OpmerkingKlik op het pictogram met drie stippen om onder andere de optie "Sensoren" weer te geven
2. Emuleer mobiele netwerkconnectiviteit in Google Chrome
De staat van het netwerk en het testen ervan dankzij Chrome stelt ons in staat om onze website te testen via verschillende soorten netwerkverbindingen zoals 3G en zelfs zonder verbinding.
Stap 1
We kunnen ook het netwerk waarin we ons bevinden nabootsen. Om dit te doen, gaan we naar het tabblad "Netwerk" en selecteren een type netwerk in de opvouwbare lijst.
Stap 2
Als we een limiet hebben vastgesteld, zien we een waarschuwingsbericht om ons eraan te herinneren dat we deze hebben ingeschakeld.
3. Voeg limieten toe aan mobiele netwerkconnectiviteit in Google Chrome
Stap 1
Deze limiet is belangrijk en we kunnen aangepaste limieten instellen met door onszelf geconfigureerde voorwaarden. Om dit te doen, drukken we op de volgende toets om het instellingenpaneel te openen.
F1
Stap 2
Klik op de optie "Beperking". We selecteren de mogelijkheid van "Aangepast profiel toevoegen".
Stap 3
Hier zullen we de limietinstellingen op een aangepaste manier instellen.
4. Venster met netwerkvoorwaarden openen in Google Chrome
We hebben meer opties in het ontwikkelaarspaneel in de DevTools.
Stap 1
Hiervoor gaan we naar het driepuntsmenu aan de rechterkant en klikken op “Meer tools” / “Netwerkvoorwaarden”.
Stap 2
Vanaf hier kunnen we de cache in- of uitschakelen en de standaardagent wijzigen in een aangepaste.
Met deze functionaliteit hoeven we niet langer naar onze mobiel te zoeken om te testen of onze website of applicatie goed werkt, het blijft alleen aan iedereen om deze tool nog wat verder te verkennen en te gebruiken om test- en implementatietijden te verkorten.
