När vi bygger en webbplats eller webbapplikation har vi alltid till uppgif.webpt att kontrollera om allt fungerar korrekt på en mobil enhet eller till och med en surfplatta. Om vi arbetar med utveckling har vi inte hur vi kan kontrollera det, eftersom vi först måste skicka våra ändringar till servern och där konsultera det på vår mobila enhet.
Men vi ska inte oroa oss eftersom Google Chrome har en funktionalitet som gör att vi med några enkla steg kan verifiera hur vår webbplats eller applikation fungerar på den mobila enhet som vi vill ha.
1. Emulera mobil enhet i Google Chrome
Som vi säger innehåller Google Chrome ett utvecklarorienterat verktyg med vilket vi kan få tillgång till uteslutna alternativ på ett ögonblick. En av dem är Mobile Device Emulator inom Device Mode.
Steg 1
Vi kommer att ha en meny längst ner som kommer att visas, som visar HTML -koden för sidan. För att visa Chrome -utvecklingspanelen går vi till "Meny / Fler verktyg / Utvecklarverktyg" eller så gör vi följande kombination av nycklar:
På Windows och Linux
Ctrl + Skift + M
På Mac
⇧ + ⌘ + M
Steg 2
Vi kommer att se att en kodpanel öppnas. Vi tittar på ikonen som motsvarar "Enhetsläge" och som aktiveras när den visas i blått. Klicka på den för att aktivera den.
Steg 3
Medan vi går till toppmenyn ovanför den emulerade sidan och väljer den enhet vi vill emulera, väljer vi i detta fall Apple iPhone x och uppdaterar så att ändringarna träder i kraft. Vi har en mängd olika förinställningar konfigurerade så att vi med ett klick har vår simulerade modell.
Steg 4
Om vi vill skapa anpassade mätningar kommer vi till där terminalmodellen visas och klickar på "Redigera".
Steg 5
De modeller som tidigare har konfigurerats visas eller så kan vi lägga till en på ett personligt sätt genom att klicka på "Lägg till anpassad enhet".
Steg 6
I alternativen i enhetsläget har vi möjlighet att aktivera eller inte sensorerna som simulerar en pekskärm.
NoteraKlicka på ikonen med tre punkter för att bland annat visa alternativet "Sensorer"
2. Emulera mobilnätverksanslutning i Google Chrome
Nätverkets tillstånd och dess testning tack vare Chrome gör att vi kan testa vår webbplats genom olika typer av nätverksanslutningar, till exempel 3G och även utan anslutning.
Steg 1
Vi kan också efterlikna det nätverk vi befinner oss i. För att göra detta går vi till fliken "Nätverk" och väljer en typ av nätverk i den hopfällbara listan.
Steg 2
Om vi har fastställt en gräns ser vi ett varningsmeddelande för att påminna oss om att vi har aktiverat det.
3. Lägg till gränser för mobilnätverksanslutning i Google Chrome
Steg 1
Denna gräns är viktig och vi kan ställa in anpassade gränser med villkor som konfigurerats av oss själva. För att göra detta trycker vi på följande tangent för att öppna panelen Inställningar.
F1
Steg 2
Klicka på alternativet "Strypning". Vi väljer möjligheten att "Lägg till anpassad profil".
Steg 3
Här kommer vi att ställa in gränsinställningarna på ett anpassat sätt.
4. Öppna panelen för nätverksförhållanden i Google Chrome
Vi har fler alternativ inom utvecklarpanelen i DevTools.
Steg 1
För att göra detta går vi till trepunktsmenyn till höger och klickar på "Fler verktyg" / "Nätverksförhållanden".
Steg 2
Härifrån kan vi aktivera eller inaktivera cacheminnet och ändra standardagenten till en anpassad.
Med denna funktionalitet behöver vi inte längre söka efter vår mobil för att testa att vår webbplats eller applikation fungerar korrekt, det återstår bara för alla att utforska detta verktyg lite mer och använda det för att förkorta test- och implementeringstider.
