Når vi bygger et websted eller en webapplikation, har vi altid til opgave at kontrollere, om alt fungerer korrekt på en mobilenhed eller endda en tablet. Hvis vi arbejder med udvikling, har vi ikke en måde at kontrollere det på, da vi først skulle sende vores ændringer til serveren og der konsultere det på vores mobile enhed.
Men vi skal ikke bekymre os, da Google Chrome har en funktionalitet, der giver os et par enkle trin til at kontrollere, hvordan vores websted eller applikation fungerer på den mobile enhed, vi ønsker.
1. Efterlign mobilenhed i Google Chrome
Som vi siger, inkorporerer Google Chrome et udviklerorienteret værktøj, som vi kan få adgang til ekskluderede muligheder på et øjeblik. En af dem er Mobile Device Emulator inden for Device Mode.
Trin 1
Vi vil have en menu i bunden, der vil blive vist, som viser os HTML -koden på siden. For at vise Chrome -udviklerpanelet går vi til "Menu / Flere værktøjer / Udviklerværktøjer", eller vi gør følgende kombination af nøgler:
På Windows og Linux
Ctrl + Shift + M.
På Mac
⇧ + ⌘ + M
Trin 2
Vi vil se, at et kodepanel åbnes. Vi ser på ikonet, der svarer til "Enhedstilstand", og som aktiveres, når det vises med blåt. Klik på den for at aktivere den.
Trin 3
Mens vi går til topmenuen over den emulerede side og vælger den enhed, vi vil efterligne, vælger vi i dette tilfælde Apple iPhone x og opdaterer, så ændringerne træder i kraft. Vi har en lang række forudindstillinger konfigureret, så vi med ét klik har vores simulerede model.
Trin 4
Hvis vi vil oprette brugerdefinerede målinger, går vi til, hvor terminalmodellen vises, og klikker på "Rediger".
Trin 5
De modeller, der tidligere er konfigurator, vises, eller vi kan tilføje en på en personlig måde ved at klikke på "Tilføj tilpasset enhed".
Trin 6
I indstillingerne i Enhedstilstand har vi mulighed for at aktivere eller ej de sensorer, der simulerer en berøringsskærm.
BemærkKlik på ikonet med tre prikker for blandt andet at vise muligheden for "Sensorer"
2. Efterlign mobilnetværksforbindelse i Google Chrome
Netværkets tilstand og dets test takket være Chrome giver os mulighed for at teste vores websted gennem forskellige typer netværksforbindelser, f.eks. 3G og endda uden forbindelse.
Trin 1
Vi kan også efterligne det netværk, vi er i. For at gøre dette går vi til fanen "Netværk" og vælger en netværkstype på listen med sammenklappelige.
Trin 2
Hvis vi har fastsat en grænse, vil vi se en advarsel for at minde os om, at vi har den aktiveret.
3. Tilføj grænser for mobilnetværksforbindelse i Google Chrome
Trin 1
Denne grænse er vigtig, og vi kan angive brugerdefinerede grænser med betingelser konfigureret af os selv. For at gøre dette skal vi trykke på følgende tast for at åbne panelet Indstillinger.
F1
Trin 2
Klik på indstillingen "Throttling". Vi vælger muligheden for "Tilføj tilpasset profil".
Trin 3
Her sætter vi grænseindstillingerne på en brugerdefineret måde.
4. Åbn panelet netværksbetingelser i Google Chrome
Vi har flere muligheder inden for udviklerpanelet i DevTools.
Trin 1
For at gøre dette går vi til trepunktsmenuen i højre side og klikker på "Flere værktøjer" / "Netværksbetingelser".
Trin 2
Herfra kan vi aktivere eller deaktivere cachen og ændre standardagenten til en tilpasset.
Med denne funktionalitet skal vi ikke længere søge efter vores mobil for at teste, at vores websted eller applikation fungerer korrekt, det er kun tilbage for alle at udforske dette værktøj lidt mere og bruge det til at forkorte test- og implementeringstider.
