Simuler Mobiltelefoner i Chrome DevTools: Din Guide

I den moderne digitale verden er det altafgørende at sikre, at din hjemmeside eller webapplikation fungerer fejlfrit på alle skærmstørrelser, fra de mindste smartphones til store computerskærme. Responsivt design er ikke længere en luksus, men en nødvendighed. Som webudvikler eller designer står du over for udfordringen med at teste dit indhold på et utal af enheder og skærmopløsninger. Heldigvis tilbyder Chrome DevTools en kraftfuld løsning: Enhedstilstand.

Enhedstilstand i Chrome DevTools er et uvurderligt værktøj, der giver dig mulighed for at simulere, hvordan din side ser ud og opfører sig på forskellige mobile enheder direkte fra din desktop- eller bærbare computer. Dette sparer dig for betydelig tid og besvær med at teste på fysiske enheder. Selvom det er en simulering og ikke en 100% nøjagtig gengivelse af en ægte enhed, giver det dig en fremragende førstehåndsfornemmelse af din sides mobiloplevelse. I denne dybdegående guide vil vi udforske de mange facetter af enhedstilstand, herunder hvordan du opretter og administrerer dine egne brugerdefinerede enheder, for at optimere din udviklingsproces.

Forstå Enhedstilstand i Chrome DevTools

Enhedstilstand er ikke én funktion, men en samling af funktioner i Chrome DevTools, der er designet til at hjælpe dig med at emulere mobile enheder. Det er vigtigt at huske, at det er en simulering. Du kører ikke din kode på en ægte mobil enhed; i stedet simulerer du brugeroplevelsen på mobile enheder fra din computer. Dette betyder, at visse aspekter af mobile enheder, såsom CPU-arkitektur og specifikke hardwarefunktioner, ikke kan emuleres perfekt. For den ultimative test bør du altid overveje fjernfejlfinding på en fysisk enhed, men til daglig udvikling er enhedstilstand mere end tilstrækkelig.

Sådan åbner du enhedsværktøjslinjen

At åbne enhedsværktøjslinjen er det første skridt mod at simulere mobile enheder. Følg disse enkle trin:

1. Åbn Chrome DevTools. Du kan gøre dette ved at højreklikke hvor som helst på din webside og vælge 'Undersøg' (Inspect), eller ved at trykke på F12 (Windows/Linux) eller Cmd + Option + I (Mac).
2. Klik på ikonet for 'Skift enhedsværktøjslinje' (Toggle Device Toolbar), som typisk ligner en mobiltelefon og en tablet sammen. Det findes i handlingslinjen øverst i DevTools-vinduet. Genvejen er Ctrl + Shift + M (Windows/Linux) eller Cmd + Shift + M (Mac).

Når enhedsværktøjslinjen er åben, vil din webside ændre størrelse og tilpasse sig en emuleret viewport.

Simulering af Mobile Viewports

Som standard åbnes enhedsværktøjslinjen i 'Responsiv' tilstand. Dette giver dig stor fleksibilitet til at teste forskellige dimensioner.

Responsiv Viewport-tilstand

I responsiv tilstand kan du frit ændre størrelsen på viewporten ved at trække i håndtagene langs kanterne. Du kan også indtaste specifikke bredde- og højdeværdier i felterne øverst. Dette er ideelt til at teste, hvordan dit design reagerer på uventede eller specifikke skærmstørrelser, der ikke nødvendigvis matcher standardenheder.

For at gøre processen hurtigere, tilbyder DevTools også forudindstillede bredder, som du kan vælge med et enkelt klik. Disse inkluderer:

• Mobil S (320 px)
• Mobil M (375 px)
• Mobil L (425 px)
• Tablet (768 px)
• Bærbar computer (1024 px)
• Bærbar computer L (1440 px)
• 4K (2560 px)

Visning af Media Queries

For at forstå, hvordan dit CSS reagerer på forskellige skærmstørrelser, er det nyttigt at vise media query-brydepunkter. Klik på 'Flere indstillinger' (More options) (de tre prikker) og vælg 'Vis media queries' (Show media queries).

DevTools vil nu vise to ekstra bjælker over viewporten:

• Den blå bjælke med max-width brydepunkter.
• Den orange bjælke med min-width brydepunkter.

Du kan klikke mellem brydepunkterne for hurtigt at ændre viewportens bredde og se, hvilken media query der aktiveres. Hvis du højreklikker på et brydepunkt og vælger 'Vis i kildekode' (Reveal in source code), åbner DevTools 'Sources'-panelet direkte til den relevante @media-deklaration i din CSS.

Indstilling af enhedens pixel-forhold (DPR)

Enhedens pixel-forhold (Device Pixel Ratio, DPR) er forholdet mellem hardware-skærmens fysiske pixels og logiske (CSS) pixels. En højere DPR indikerer en HiDPI-skærm (High Dots Per Inch), som f.eks. Apples Retina-skærme. Chrome bruger DPR-værdien, når den tegner på disse skærme for at sikre skarp tekst og billeder.

Sådan indstiller du en DPR-værdi:

1. Klik på 'Flere indstillinger' (de tre prikker).
2. Vælg 'Tilføj enhedens pixel-forhold' (Add device pixel ratio).
3. I den nye 'DPR'-rullemenu, der vises i handlingslinjen øverst i viewporten, kan du vælge en ønsket DPR-værdi (f.eks. 1, 2, 3).

Konfiguration af enhedstype

Enhedstypen simulerer, om enheden er mobil eller desktop, og hvordan den interagerer med siden (touch eller klik). Hvis du ikke ser 'Enhedstype'-listen, skal du vælge 'Flere indstillinger' > 'Tilføj enhedstype'.

Her er de forskellige muligheder og deres betydning:

Dette er afgørende for at teste, hvordan din side reagerer på touch-begivenheder kontra museklik, og hvordan den renderes afhængigt af den emulerede enhedstype.

Specifik Enhedsemulering

Udover den responsive tilstand kan du også simulere dimensionerne af en specifik mobil enhed ved at vælge den fra 'Dimensioner'-listen. Dette er især nyttigt, hvis du designer til en bestemt populær telefonmodel.

Roter Viewporten til Horisontal Orientering

Mange brugere roterer deres mobiltelefoner for at få en bredere visning af indhold. Du kan nemt simulere dette ved at klikke på 'Roter'-knappen (Rotate) i værktøjslinjen. Dette vil skifte viewporten mellem portræt- og landskabsretning.

Aktiver eller deaktiver dobbeltskærmstilstand

Nogle moderne enheder, som f.eks. Microsoft Surface Duo, har to skærme. DevTools kan emulere dette. Klik på 'Skift dobbeltskærmstilstand' (Toggle dual-screen mode) i værktøjslinjen for at skifte mellem enkelt- og dobbeltskærmsvisning.

Indstilling af enhedens position

Foldbare skærme, som dem der findes i Asus Zenbook Fold, kan have forskellige 'stillinger': kontinuerlig (flad) eller foldet (med en vinkel mellem skærmsektionerne). Du kan vælge 'Kontinuerlig' eller 'Foldet' fra den relevante rullemenu i værktøjslinjen for at teste, hvordan dit layout tilpasser sig disse forskellige tilstande.

Visning af enhedsrammen

For en mere realistisk simulering kan du vise den fysiske ramme omkring viewporten, når du emulerer en specifik enhed (f.eks. en Nest Hub). Vælg 'Flere indstillinger' > 'Vis enhedsramme' (Show device frame). Bemærk, at DevTools ikke har grafik til alle enheder, så rammen vises kun for understøttede modeller.

Tilføjelse af Brugerdefinerede Mobile Enheder: Nøglen til Fleksibilitet

Mens DevTools leveres med en række foruddefinerede enheder, vil du sandsynligvis støde på situationer, hvor du har brug for at teste på specifikke, mindre almindelige, eller ældre enheder. Her kommer muligheden for at tilføje brugerdefinerede enheder ind i billedet.

Manuel tilføjelse via DevTools UI

Dette er den mest ligetil metode til at tilføje en enkelt brugerdefineret enhed:

1. Klik på rullemenuen 'Enhed' (Device) og vælg derefter 'Rediger' (Edit).
2. Dette åbner 'Indstillinger'-fanen i DevTools under 'Enheder'.
3. Her kan du enten vælge en enhed fra den eksisterende liste over understøttede enheder eller klikke på 'Tilføj brugerdefineret enhed' (Add custom device) for at oprette din egen.
4. Hvis du tilføjer din egen, skal du indtaste følgende:
   • Enhedsnavn: Et beskrivende navn (f.eks. "Min Gamle iPhone 7").
   • Bredde: Viewportens bredde i pixels.
   • Højde: Viewportens højde i pixels.

   De følgende felter er valgfrie, men anbefales for mere præcis emulering:

   • Enhedens pixel-forhold (DPR): F.eks. 2 eller 3 for HiDPI-skærme.
   • Bruger-agent streng (User-agent string): Den streng, der identificerer browseren og operativsystemet til serveren. Du kan finde disse online for specifikke enheder.
   • Enhedstype: Vælg 'Mobil' som standard.
5. Klik på 'Tilføj' (Add).
6. Din nye enhed vil nu være tilgængelig i 'Dimensioner'-rullemenuen i enhedsværktøjslinjen.

Her er et par eksempler på populære enheder, du måske vil tilføje, hvis de ikke allerede er standard:

Avanceret: Redigering af Preferences-filen

For dem, der arbejder med mange Chrome-profiler eller ønsker at tilføje en stor mængde brugerdefinerede enheder på én gang, kan det være mere effektivt at redigere Chromes 'Preferences'-fil direkte. Advarsel: Luk altid Chrome helt ned, før du redigerer denne fil, da Chrome ellers kan overskrive dine ændringer.

Filen findes typisk under ~/Library/Application Support/Google/Chrome/Profile #/ på macOS. Du skal lede efter nøglen devtools.preferences.custom-emulated-device-list. Denne streng indeholder en JSON-lignende struktur, der definerer dine brugerdefinerede enheder. Det kan være komplekst at redigere manuelt på grund af indlejrede citater og escaping, men et værktøj som VS Code med 'Format Document' (Alt + Shift + F) kan gøre det mere læseligt.

Brug af Vibranium til Import/Export

Den mest elegante løsning for at administrere store sæt brugerdefinerede enheder er et CLI-værktøj kaldet Vibranium. Dette værktøj er skabt til at håndtere import og eksport af enhedsindstillinger og er især nyttigt, hvis du har flere Google-profiler eller arbejder på forskellige computere.

Du kan installere og bruge Vibranium via npm. Et eksempel på brug er:

npx @pittankopta/vibranium add -r ~/Downloads/vibranium.json

Dette kommando vil tilføje enheder defineret i vibranium.json-filen til din Chrome-profil. Vibranium understøtter en mere læsbar JSON-struktur til enhedsdefinitioner, hvilket eliminerer besværet med manuel filredigering. Dette er den anbefalede metode for erfarne udviklere.

Ydeevne- og Sensor-emulering

Udover visuelle simuleringer kan DevTools også emulere netværksforhold og sensordata, hvilket er afgørende for en realistisk testoplevelse.

Netværks- og CPU-begrænsning (Throttling)

En vigtig del af mobiloplevelsen er hastigheden. Mobildataforbindelser er ofte langsommere og mere ustabile end kablede forbindelser. DevTools giver dig mulighed for at simulere dette:

• I 'Throttle'-rullemenuen kan du vælge 'Mid-tier mobile' (simulerer en hurtig 3G-forbindelse og begrænser CPU'en til 4x langsommere) eller 'Low-end mobile' (simulerer en langsom 3G-forbindelse og begrænser CPU'en til 6x langsommere).
• Du kan også begrænse kun CPU'en fra 'Performance'-panelet under 'Capture Settings' (f.eks. '4x slowdown', '6x slowdown', '20x slowdown').
• For kun at begrænse netværket, gå til 'Network'-panelet og vælg 'Fast 3G' eller 'Slow 3G' fra 'Throttling'-rullemenuen.

Disse begrænsninger relaterer sig til din computers normale kapacitet, så en 4x langsommere CPU på en kraftfuld desktop vil stadig være hurtigere end en faktisk mobiltelefon.

Sensor-emulering

Mange mobile applikationer bruger enhedens sensorer, f.eks. til geolokation eller orientering. DevTools' 'Sensors'-panel giver dig mulighed for at emulere disse:

• Annuller geolokation: Klik på 'Tilpas og kontroller DevTools' (Customize and control DevTools) (de tre prikker) > 'Flere værktøjer' (More tools) > 'Sensorer' (Sensors). Her kan du vælge forudindstillede steder, indtaste egne koordinater, eller indstille 'Location unavailable' for at teste fejlhåndtering.
• Indstil orientering: I samme 'Sensorer'-panel kan du vælge forudindstillede orienteringer eller indtaste dine egne alfa-, beta- og gamma-værdier for at simulere, hvordan enheden roteres i rummet.

Disse funktioner er afgørende for at teste webapps, der udnytter GPS, gyroskop eller accelerometer.

Andre Nyttige Funktioner

Enhedstilstand byder på yderligere værktøjer, der kan forbedre din testproces.

Visning af Linealer

For præcis måling af elementer i viewporten kan du vise linealer. Klik på 'Flere indstillinger' > 'Vis linealer' (Show rulers). Linealerne vises øverst og til venstre for viewporten, og deres enhed er pixels. Du kan klikke på linealerne for at indstille viewportens bredde og højde direkte.

Zoom på Viewporten

Hvis du har brug for at se detaljer tættere på eller få et overblik over hele siden, kan du bruge 'Zoom'-rullemenuen til at zoome ind eller ud på viewporten.

Tag Skærmbilleder

At tage skærmbilleder er en hurtig måde at dokumentere eller dele dit design på:

• Skærmbillede af viewporten: Klik på 'Flere indstillinger' > 'Tag skærmbillede' (Capture screenshot).
• Skærmbillede af hele siden: Vælg 'Tag et skærmbillede i fuld størrelse' (Capture full size screenshot) fra samme menu. Dette inkluderer indhold, der ikke er synligt i viewporten.
• Skærmbillede med enhedsramme: Først skal du vise enhedsrammen (som beskrevet tidligere), og derefter tage et skærmbillede.

DevTools tilbyder flere avancerede metoder til skærmbilleder, som du kan udforske for yderligere funktionalitet.

Eksterne Værktøjer: Window Resizer

Udover de indbyggede DevTools-funktioner findes der også Chrome-udvidelser, der kan supplere din arbejdsgang. En populær udvidelse er 'Window Resizer'. Denne udvidelse giver dig mulighed for hurtigt at ændre størrelsen på browserens vindue til forskellige forudindstillede opløsninger, herunder dem for iPhone, ældre computere og laptops. Det er især nyttigt for webudviklere og designere til at teste layout på tværs af et bredt spektrum af skærmstørrelser, selvom det ikke simulerer de mobile enheders specifikke adfærd på samme måde som DevTools. Du kan også tilpasse og tilføje dine egne opløsninger i udvidelsens indstillinger.

Ofte Stillede Spørgsmål (FAQ)

Er Chrome DevTools' emulering 100% nøjagtig?

Nej, det er vigtigt at huske, at DevTools udfører en simulering, ikke en ægte emulering. Mens den er yderst præcis til at gengive layout, rendering og grundlæggende interaktioner, kan den ikke fuldt ud replikere enhedsspecifik hardware, CPU-arkitektur, grafisk ydeevne eller visse browserbugs, der kun opstår på specifikke mobile operativsystemer. Den er dog fremragende til den primære udvikling og fejlfinding af responsivt design.

Hvorfor har jeg brug for brugerdefinerede enheder, når der er så mange foruddefinerede?

Brugerdefinerede enheder er uvurderlige, når du skal teste specifikke eller niche-enhedsdimensioner, der ikke er inkluderet i standardlisten. Dette kan være enheder, der er populære i et bestemt marked, ældre telefonmodeller, unikke tabletstørrelser eller blot brugerdefinerede dimensioner, der matcher et specifikt designkrav. De giver dig fuld kontrol og fleksibilitet til at dække alle dine testbehov.

Kan jeg teste ydeevne på mobiltelefoner med DevTools?

Ja, absolut! DevTools tilbyder omfattende muligheder for at begrænse (throttle) både netværkshastighed og CPU-ydeevne. Dette giver dig et realistisk indblik i, hvordan din side vil indlæse og køre på langsommere netværksforbindelser og mindre kraftfulde mobile processorer. Du kan simulere alt fra langsom 3G til begrænset CPU-kraft for at identificere flaskehalse og optimere din kode.

Hvordan debugger jeg på en ægte mobil enhed?

For den mest nøjagtige test og debugging på en fysisk mobil enhed, bør du bruge fjernfejlfinding (remote debugging). Dette involverer at forbinde din mobile enhed til din computer via USB og bruge Chrome DevTools til at inspicere, ændre og debugge koden, der kører på den faktiske enhed. Dette overgår begrænsningerne ved simulering og giver dig adgang til enhedens sande ydeevne og adfærd.

Hvad er Device Pixel Ratio (DPR), og hvorfor er det vigtigt?

DPR er forholdet mellem en enheds fysiske pixels og CSS-pixels. En enhed med en DPR på 2 betyder, at der er 2 fysiske pixels for hver 1 CSS-pixel. Dette er vigtigt for at sikre, at billeder og tekst vises skarpt på højopløsningsskærme (HiDPI eller Retina-skærme). Korrekt håndtering af DPR sikrer, at dit indhold ser professionelt ud og ikke fremstår sløret eller pixeliseret på moderne enheder.

Konklusion

Chrome DevTools' enhedstilstand er et kraftfuldt og alsidigt værktøj, der er uundværligt for enhver webudvikler eller designer. Ved at mestre dens funktioner, især evnen til at tilføje og administrere brugerdefinerede enheder, kan du strømline din udviklingsproces, effektivt teste responsivt design og sikre, at dine webapplikationer leverer en fremragende brugeroplevelse på tværs af alle enheder. Selvom simulering har sine begrænsninger, er fordelene ved hurtig iteration og grundig test langt større. Invester tid i at udforske alle de muligheder, DevTools tilbyder, og din arbejdsgang vil blive markant forbedret.

Hvis du vil læse andre artikler, der ligner Simuler Mobiltelefoner i Chrome DevTools: Din Guide, kan du besøge kategorien Teknologi.