Sådan forhåndsviser du dit websted på forskellige enheder ved hjælp af Google Chrome

Når du opretter en hjemmeside, ønsker du, at den skal være responsiv og tilpasse sig forskellige skærmstørrelser. En måde at teste dette på er ved at bruge Google Chromes indbyggede udviklerværktøjer.

Chromes DevTools giver dig mulighed for at fejlsøge forskellige aspekter af dit websted. Dette inkluderer ændring og forhåndsvisning af HTML-kildekoden og CSS. Det giver dig også mulighed for at fejlsøge JavaScript-kode på klientsiden og se netværkstrafik.

DevTools har også en mulighed for at forhåndsvise dit websted på forskellige enheder. Dette omfatter forskellige typer mobilenheder, iPads, tablets og mere.

For at åbne Enhedsværktøjslinjen på Google Chrome skal du åbne Vinduet Chrome Developer Tools:

1. Åbn en hjemmeside.
2. Højreklik på siden og klik på Inspicere.
3. Vinduet Chrome DevTools åbnes. Det kan åbne til siden eller bunden af ​​din browser eller som et nyt vindue.
4. Øverst til venstre i vinduet er der to ikoner. Klik på ikonet, der viser flere enheder af forskellig størrelse.
5. Skærmen ændres for at vise dig, hvordan hjemmesiden vil se ud på en mobilenhed.

Sådan skifter du mellem forskellige enheder

Brug rullemenuen øverst på enhedsværktøjslinjen til at skifte mellem forskellige enheder.

1. Helt øverst på værktøjslinjen viser, hvilken type enhed du i øjeblikket ser dit websted på. Klik på rullemenuen for at vælge en anden enhed fra listen.
2. I stedet for at vælge en eksisterende enhed, kan du vælge at se hjemmesiden i responsiv tilstand. Klik på rullemenuen og vælg Lydhør mulighed.
3. Ved siden af ​​rullemenuen kan du også vælge at indtaste en brugerdefineret bredde og højde på en enhed.
4. I stedet for at indtaste en bredde og højde, kan du også klikke og trække i hjørnerne af vinduet for at justere størrelsen.

Sådan tilføjes en brugerdefineret enhed

Hvis du gerne vil gemme en brugerdefineret bredde og højde, kan du tilføje en brugerdefineret enhed. Enhedens værktøjslinje viser derefter din nye enhed i rullemenuen for enheder.

1. Klik på rullemenuen, der viser alle enheder.
2. Klik på Redigere.
3. Under Indstillinger-sidebjælken skal du sørge for, at du har Enheder fane valgt. Her kan du også se en liste over flere enheder, som du kan vælge imellem.
4. Klik på Tilføj tilpasset enhed.
5. Indtast et navn, en bredde og en højde for enheden. Sørg for, at du også vælger enhedstypen, f.eks. om det er en mobil eller stationær enhed. Hvis du udvider Brugeragentklienttip mulighed, kan du tilføje andre detaljer såsom enhedsmodel, mærke eller version.
6. Klik på Tilføje.
7. Gå tilbage til rullemenuen, der viser alle enheder. Du vil se din nye brugerdefinerede enhed på listen.
8. Du kan redigere disse detaljer igen senere ved at gå tilbage til den tilpassede enhedsside. Klik på redigere knappen ud for din enheds navn for at begynde at redigere.

Det er meget nyttigt at kunne forhåndsvise dit websted på forskellige enheder og skærmstørrelser af flere årsager.

For det første kan du teste dit websteds ydeevne på forskellige enheder. Nogle mobiler kan have hurtigere netværkshastigheder eller CPU-drossel end andre.

Enhedens værktøjslinje giver dig mulighed for at skifte mellem forskellige netværkshastighedsindstillinger. Dette giver dig mulighed for at teste hastigheden af ​​ethvert opkald til en server eller at teste indlæsning og gengivelse af data på din hjemmeside.

Derudover kan du også se, hvordan designet ser ud på en bestemt enhed, fra et UI-synspunkt. Hvis du bruger CSS-medieforespørgsler, kan du bruge dette værktøj til at kontrollere, at de fungerer, som du forventer.

Du kan bruge Google Chromes DevTools-vindue til at teste, hvordan dit websted tilpasser sig forskellige skærmstørrelser og for at sikre, at dit websted er responsivt. Du kan også bruge det til at teste ydeevnen af ​​dit websted, og om dine medieforespørgsler fungerer som forventet.

Du kan også bruge Google Chromes DevTools til andre formål. Du kan bruge den til at fejlsøge eventuelle CSS-problemer ved at ændre CSS'en under fanen Styles i elementvinduet. Dette giver dig mulighed for at se eventuelle CSS-ændringer med det samme, hvilket kan fremskynde din kodnings-workflow.

Sådan bruger du Google Chrome til at fejlfinde CSS

Læs Næste