Når vi bygger et nettsted eller en webapplikasjon, har vi alltid til oppgave å sjekke om alt fungerer som det skal på en mobil enhet eller til og med et nettbrett. Hvis vi jobber med utvikling, har vi ikke hvordan vi kan kontrollere det, siden vi først må sende endringene våre til serveren og der konsultere det på mobilenheten vår.
Men vi skal ikke bekymre deg siden Google Chrome har en funksjonalitet som lar oss med noen få enkle trinn for å bekrefte hvordan nettstedet eller applikasjonen vår fungerer på den mobile enheten vi ønsker.
1. Etterlign mobilenheten i Google Chrome
Som vi sier, inneholder Google Chrome et utviklerorientert verktøy som vi kan få tilgang til ekskluderte alternativer med et øyeblikk. En av dem er mobilenhetsemulatoren i enhetsmodus.
Trinn 1
Vi vil ha en meny nederst som skal vises, som viser oss HTML -koden til siden. For å vise Chrome -utviklerpanelet går vi til "Meny / Flere verktøy / Utviklerverktøy", eller vi gjør følgende kombinasjon av nøkler:
På Windows og Linux
Ctrl + Shift + M
På Mac
⇧ + ⌘ + M
Steg 2
Vi vil se at et kodepanel åpnes. Vi ser på ikonet som tilsvarer "Enhetsmodus", og som aktiveres når det vises i blått. Klikk på den for å aktivere den.
Trinn 3
Mens vi går til toppmenyen over den emulerte siden og velger enheten vi vil etterligne, i dette tilfellet velger vi Apple iPhone x og oppdaterer slik at endringene trer i kraft. Vi har et stort utvalg forhåndsinnstillinger konfigurert slik at vi med ett klikk har vår simulerte modell.
Trinn 4
Hvis vi vil lage egendefinerte målinger, går vi til der terminalmodellen vises og klikker på "Rediger".
Trinn 5
De modellene som tidligere er konfigurator vil vises, eller vi kan legge til en på en personlig måte ved å klikke på "Legg til tilpasset enhet".
Trinn 6
I alternativene i enhetsmodus har vi muligheten til å aktivere sensorene som simulerer en berøringsskjerm eller ikke.
MerkKlikk på trepunktsikonet for å vise blant annet alternativet "Sensorer"
2. Etterlign tilkobling til mobilnettverk i Google Chrome
Tilstanden til nettverket og testingen takket være Chrome lar oss teste nettstedet vårt gjennom forskjellige typer nettverkstilkoblinger, for eksempel 3G og til og med uten tilkobling.
Trinn 1
Vi kan også etterligne nettverket vi er i. For å gjøre dette, går vi til kategorien "Nettverk" og velger en type nettverk i den sammenleggbare listen.
Steg 2
Hvis vi har satt en grense, vil vi se en advarsel for å minne oss om at vi har aktivert den.
3. Legg til grenser for mobilnettverkstilkoblingen i Google Chrome
Trinn 1
Denne grensen er viktig, og vi kan sette tilpassede grenser med betingelser konfigurert av oss selv. For å gjøre dette, trykker vi på følgende tast for å åpne Innstillinger -panelet.
F1
Steg 2
Klikk på "Throttling" -alternativet. Vi velger muligheten for "Legg til tilpasset profil".
Trinn 3
Her vil vi sette grenseverdiene på en tilpasset måte.
4. Åpne panelet for nettverksbetingelser i Google Chrome
Vi har flere alternativer i utviklerpanelet i DevTools.
Trinn 1
For å gjøre dette, går vi til trepunktsmenyen på høyre side og klikker på "Flere verktøy" / "Nettverksforhold".
Steg 2
Herfra kan vi aktivere eller deaktivere hurtigbufferen og endre standardagenten til en tilpasset.
Med denne funksjonaliteten trenger vi ikke lenger å søke etter mobilen vår for å teste at nettstedet eller applikasjonen vår fungerer som den skal. Det gjenstår bare for alle å utforske dette verktøyet litt mer og bruke det til å forkorte testing og implementeringstider.
