Slik forhåndsviser du nettstedet ditt på forskjellige enheter ved hjelp av Google Chrome

Når du lager en nettside, vil du at den skal være responsiv og tilpasse seg ulike skjermstørrelser. En måte å teste dette på er å bruke Google Chromes innebygde utviklerverktøy.

Chromes DevTools lar deg feilsøke forskjellige aspekter av nettstedet ditt. Dette inkluderer endring og forhåndsvisning av HTML-kildekoden og CSS. Den lar deg også feilsøke JavaScript-kode på klientsiden og se nettverkstrafikk.

DevTools har også et alternativ for å forhåndsvise nettstedet ditt på forskjellige enheter. Dette inkluderer ulike typer mobile enheter, iPads, nettbrett og mer.

For å åpne enhetsverktøylinjen på Google Chrome, må du åpne Vinduet Chrome-utviklerverktøy:

1. Åpne et nettsted.
2. Høyreklikk på siden og klikk videre Undersøke.
3. Vinduet Chrome DevTools åpnes. Den kan åpnes på siden eller bunnen av nettleseren din, eller som et nytt vindu.
4. Øverst til venstre i vinduet er det to ikoner. Klikk på ikonet som viser flere enheter av forskjellige størrelser.
5. Skjermen endres for å vise deg hvordan nettstedet vil se ut på en mobilenhet.

Hvordan bytte mellom forskjellige enheter

Bruk rullegardinmenyen øverst på enhetens verktøylinje for å bytte mellom ulike enheter.

1. Helt øverst på verktøylinjen vil du vise hvilken type enhet du for øyeblikket ser på nettstedet ditt på. Klikk på rullegardinmenyen for å velge en annen enhet fra listen.
2. I stedet for å velge en eksisterende enhet, kan du velge å se nettstedet i responsiv modus. Klikk på rullegardinmenyen og velg Mottakelig alternativ.
3. Ved siden av rullegardinmenyen kan du også velge å angi en egendefinert bredde og høyde på en enhet.
4. I stedet for å skrive inn en bredde og høyde, kan du også klikke og dra hjørnene på vinduet for å justere størrelsen.

Slik legger du til en tilpasset enhet

Hvis du vil lagre en egendefinert bredde og høyde, kan du legge til en egendefinert enhet. Enhetsverktøylinjen vil da vise den nye enheten din i rullegardinmenyen for enheter.

1. Klikk på rullegardinmenyen som viser alle enheter.
2. Klikk på Redigere.
3. Under Innstillinger-sidefeltet, sørg for at du har Enheter fane valgt. Her kan du også se en liste over flere enheter du kan velge mellom.
4. Klikk på Legg til tilpasset enhet.
5. Skriv inn navn, bredde og høyde for enheten. Pass på at du også velger enhetstype, for eksempel om det er en mobil eller stasjonær enhet. Hvis du utvider Hint til brukeragentklient alternativet, kan du legge til andre detaljer som enhetsmodell, merke eller versjon.
6. Klikk på Legge til.
7. Gå tilbake til rullegardinmenyen som viser alle enheter. Du vil se den nye tilpassede enheten din på listen.
8. Du kan redigere disse detaljene igjen senere ved å gå tilbake til siden for egendefinerte enheter. Klikk på redigere knappen ved siden av enhetens navn for å begynne å redigere.

Det er veldig nyttig å kunne forhåndsvise nettstedet ditt på forskjellige enheter og skjermstørrelser, av flere grunner.

For det første kan du teste ytelsen til nettstedet ditt på forskjellige enheter. Noen mobiler kan ha raskere nettverkshastigheter eller CPU-struping enn andre.

Enhetens verktøylinje lar deg veksle mellom ulike alternativer for nettverkshastighet. Dette lar deg teste hastigheten på alle anrop til en server, eller å teste lasting og gjengivelse av data på nettstedet ditt.

I tillegg kan du også se hvordan designet ser ut på en bestemt enhet, fra et UI-synspunkt. Hvis du bruker CSS-mediespørringer, kan du bruke dette verktøyet til å sjekke at de fungerer som du forventer.

Du kan bruke Google Chromes DevTools-vindu for å teste hvordan nettstedet ditt tilpasser seg forskjellige skjermstørrelser og for å sikre at nettstedet ditt er responsivt. Du kan også bruke den til å teste ytelsen til nettstedet ditt, og om medieforespørslene dine fungerer som forventet.

Du kan også bruke Google Chromes DevTools til andre formål. Du kan bruke den til å feilsøke eventuelle CSS-problemer ved å endre CSS under Styles-fanen i Element-vinduet. Dette lar deg se eventuelle CSS-endringer umiddelbart, noe som kan øke hastigheten på arbeidsflyten for koding.

Slik bruker du Google Chrome til å feilsøke CSS

Les Neste