Du jobber med et responsivt layout, sjekker det på desktop, og alt ser perfekt ut. Du åpner det på en smarttelefon, layoutet knekker sammen, skriften blir på størrelse med et fyrstikkhode, og «Betal»-knappen glir ut av skjermkanten.

Produktgiganter med budsjetter for QA-laboratorier har råd til å kjøpe en flåte av fysiske enheter for hver skjerm. Men hva skal en frilanser, en trepersoners startup eller en soloutvikler gjøre? Svaret er Chromes innebygde DevTools-emulator. Gratis, starter med en enkelt tastatursnarvei, og dekker det store flertallet av daglige responsive testoppgaver. Ingen ekstra programvare å installere, ingen virtuelle maskiner, ingen skytjenester.

Nedenfor følger en trinnvis guide til Enhetsmodus: fra aktivering til finjustering av nettverksregulering og sensoremulering. Alt du trenger for å teste et nettsted på smarttelefoner og nettbrett uten å forlate jobb-PC-en.

💡 Hurtigoversikt:

• Åpne DevTools (F12 eller Ctrl+Shift+I) og aktiver Enhetsverktøylinjen (Ctrl+Shift+M), siden vil bytte til emuleringsmodus for mobilvisning.
• Velg en spesifikk modell fra nedtrekkslisten (iPhone, Pixel, Galaxy) eller angi en egendefinert oppløsning i piksler, Chrome vil automatisk bruke riktig brukeragent.
• Konfigurer nettverksregulering (Slow 3G / Fast 3G) og aktiver berøringsemulering for å se hvordan nettstedet lastes og samhandler med brukere på ekte mobilt internett.
• Husk begrensningene: emulatoren gjengir ikke maskinvare-GPU-en til en spesifikk enhet, iOS-skriftgjengivelse eller Safari WebKit-oppførsel, en ekte telefon er fortsatt nødvendig for endelig testing.

Hva Enhetsmodus er og når det er nok

Enhetsmodus er et sett med verktøy inne i Chrome DevTools som emulerer visning av en side på en mobil enhet. Den gjør tre ting samtidig:

• Emulerer visningsporten, og komprimerer visningsområdet til de fysiske skjermdimensjonene til den valgte enheten. Du ser nettstedet slik en bruker av en iPhone 16 Pro Max eller Samsung Galaxy S25 ville sett det.
• Forfalsker brukeragenten, serveren mottar en streng som er typisk for en mobil nettleser. Kritisk for nettsteder med dynamisk servering som leverer forskjellige layouter til desktop og mobil.
• Aktiverer berøringsemulering, musepekeren blir til en fingersimulering, med støtte for berøringshendelser, bevegelser og multi-touch.

La oss umiddelbart fastslå grensene. Enhetsmodus emulerer IKKE: Safari-gjengivelsesmotoren (WebKit), maskinvareakselerasjon GPU for en spesifikk modell, batterioppførsel og bakgrunnsprosesser i operativsystemet, eller mobilnettverksoppførsel for forskjellige operatører. For den endelige godkjenningstesten før lansering er en fysisk telefon fortsatt nødvendig. Men for daglig utvikling og feilsøking dekker verktøyet behovene med god margin.

Hvordan åpne Enhetsmodus: tre metoder

Chrome tilbyr flere veier til emuleringspanelet. Velg den som er raskest i arbeidsflyten din.

Metode 1. Tastatursnarveier, den raskeste

Mens du er i Chrome, trykk:

• Windows / Linux: Ctrl + Shift + M
• macOS: Cmd + Shift + M

Hvis DevTools ikke allerede er åpent, åpnes det automatisk sammen med emuleringspanelet. Ved å trykke igjen deaktiveres Enhetsmodus og siden går tilbake til normal visning.

Metode 2. Knapp i DevTools

Åpne DevTools (F12 eller Ctrl+Shift+I). I øvre venstre hjørne av panelet, ved siden av Elements-fanen, er det et telefon- og nettbrettikon, Toggle device toolbar. Klikk på det.

Metode 3. Gjennom Chromes hovedmeny

Tre prikker i øvre høyre hjørne av nettleseren → More Tools → Developer Tools. Deretter Enhetsverktøylinje-knappen, som i metode 2. Veien er lengre, men den redder deg hvis tastatursnarveier har gått i glemmeboken midt i en midnattsdeploy.

Enhetsvalg og emuleringsinnstillinger

Etter at du har aktivert Enhetsverktøylinjen, lastes siden på nytt og et kontrollpanel vises over den. La oss bryte ned hvert element.

Nedtrekksliste for enheter

Det sentrale elementet, en nedtrekksliste med forhåndsdefinerte profiler. Chrome leveres med omtrent femten forhåndsinnstillinger: fra iPhone SE (for å sjekke kompakte skjermer) til iPhone 16 Pro Max, fra Pixel 9 til Galaxy S25.

Velg en enhet, og Chrome gjør i ett trinn:

• angir visningsportens bredde og høyde;
• bruker den tilsvarende brukeragenten;
• aktiverer berøringsemulering (med mindre det er manuelt deaktivert).

For å legge til en enhet som ikke er i listen, klikk Edit... i den samme nedtrekksmenyen og fyll ut skjemaet: skjermoppløsning, Device Pixel Ratio, brukeragentstreng. Den egendefinerte profilen vil vises i den generelle listen.

Manuell oppløsning

Ønsker du ikke å binde deg til en spesifikk modell? Skriv inn vilkårlige tall i bredde- og høydefeltene. Typisk scenario: «hvordan ser layoutet ut på en standard Android-smarttelefon i mellomklassen?», du skriver inn en typisk oppløsning og får svaret umiddelbart, uten å søke etter riktig modell i listen.

Device pixel ratio

DPR bestemmer hvor mange fysiske skjermpiksler som tilsvarer én CSS-piksel. Moderne flaggskip har DPR = 3, nettbrett og budsjetttelefoner har 2. I Chromes emuleringspanel vises gjeldende DPR-verdi for den valgte enheten og lar deg endre den via nedtrekkslisten. Dette påvirker direkte skarpheten til bilder og SVG-ikoner på retina-skjermer.

Skjermrotering, nettverksregulering og sensorer

Tre tilleggsinnstillinger som gjør Enhetsmodus fra et enkelt «forstørrelsesglass» til et fullverdig testverktøy.

Skjermrotering

Ikonet med to sirkulære piler bytter bredde og høyde. Veksle alltid stående ↔ liggende på hver nøkkelskjerm: sidehode, produktkort, betalingsskjema. Horisontal rulling på en landingsside i stående orientering er en kritisk feil som klienten vil legge merke til raskere enn deg.

Nettverksregulering

Nedtrekkslisten No throttling lar deg begrense lastehastighet. Tilgjengelige forhåndsinnstillinger:

• Slow 3G (400 Kbps), dårlig mobilt internett på T-banen, utenfor byen eller i en kjeller;
• Fast 3G (1,6 Mbps), typisk mobilt internett i byen;
• Slow 4G og Fast 4G (4-25 Mbps), god tilkobling.

Etter å ha valgt en profil, oppdater siden og se på tidsmålingene i Nettverk-panelet. Hvis skrifter eller heltebilder bruker mer enn tre sekunder på Fast 3G, har en bruker på tregt internett allerede gått til en konkurrent.

Berøringsemulering

Aktivert som standard når du velger en mobil enhet. Markøren blir til en gjennomskinnelig sirkel som simulerer et fingertrykk. Sjekk tre ting:

• fungerer nedtrekksmenyer ved trykk, ikke ved sveving;
• er størrelsen på interaktive elementer tilstrekkelig, ifølge WCAG 2.1 er minimum berøringsmål 48×48 CSS-piksler;
• er det ingen falske utløsere for sveveeffekter som er fysisk umulige å reprodusere på en ekte telefon.

Geolokalisering, mediespørringer og sensorer

Chrome har skjult flere nyttige verktøy i «tre prikker»-menyen (⋮) inne i DevTools-panelet, i More tools-seksjonen.

Geolokalisering

Sensors-fanen (More tools → Sensors) lar deg angi vilkårlige breddegrads- og lengdegradskoordinater. Et nettsted som bruker Geolocation API vil motta det angitte punktet i stedet for det ekte. Praktisk for å sjekke regionale priser, automatisk gjenkjenning av grensesnittspråk og lokale kampanjer.

Mediespørringer

Panelet Rendering (More tools → Rendering) viser CSS-mediespørringsbruddpunkter direkte over siden. Aktiver flagget Show media queries, en farget skala med merkepunkter for stilbytte vil vises over siden. Ved å klikke på et punkt settes visningsporten umiddelbart til den tilsvarende bredden. En uunnværlig ting når du feilsøker komplekse bruddpunkter.

Prefers-color-scheme og prefers-reduced-motion

Også i Rendering-panelet finnes brytere:

• prefers-color-scheme, tvinger lyst eller mørkt tema uavhengig av OS-innstillinger;
• prefers-reduced-motion, emulerer en forespørsel om å deaktivere animasjon, kritisk for testing av tilgjengelighet.

Skjermbilder og skjermopptak

Enhetsmodus kan ta skjermbilder av den emulerte siden. Tre prikker i Enhetsverktøylinje-panelet → Capture screenshot, og du får en PNG nøyaktig i den størrelsen du ser på skjermen. For et skjermbilde av hele sidehøyden, velg Capture full size screenshot, nyttig for å sende layoutet til en klient eller i en feilrapport.

Hvis statiske skjermbilder ikke er nok, tar Chrome opp et skjermopptak av arbeidet med den emulerte siden. Åpne Recorder-panelet (More tools → Recorder), opprett et nytt opptak og utfør handlinger, Chrome vil registrere hvert trinn med tidsstempler. Det ferdige opptaket kan eksporteres som et Puppeteer-skript og automatisere retesting etter redigeringer.

Begrensninger: når du ikke klarer deg uten en ekte enhet

Chrome-emulering er et kraftig verktøy, men ingen universalløsning. Her er hva den fundamentalt sett ikke dekker:

• iOS-gjengivelse. Ifølge Apple App Store-regler må alle nettlesere på iPhone og iPad bruke WebKit-motoren, selv Chrome og Firefox er teknisk sett omslag rundt Safari WebView. DevTools viser gjengivelsen til Chromium-motoren (Blink), og forskjeller i skriftvisning, avrunding, skygger og filtre mellom Blink og WebKit kan være betydelige.
• Maskinvaresensorer. Gyroskop, barometer, NFC, maskinvarevideoakselerasjon, ingenting av dette finnes i emulatoren, og de tilsvarende API-ene vil returnere null eller en feil.
• Oppførsel ved lavt batteri. iOS og Android avlaster aggressivt bakgrunnsfaner ved kritiske batterinivåer. Emulatoren reproduserer ikke dette.
• Ekte JavaScript-ytelse. En mobilprosessor er mange ganger tregere enn en desktop-prosessor, animasjoner som «flyr» på en jobb-PC kan fryse på en mellomklassetelefon. For måling, bruk Lighthouse med CPU-regulering.

Regelen er enkel: gjennomfør hele utviklings- og layoutsyklusen i Enhetsmodus, og utfør den endelige sjekken av hver utgivelse på minst én fysisk Android-enhet og én iPhone.

En kort, men innholdsrik video fra Chrome Developers-teamet: Jecelyn Yeen viser fem måter å emulere mobil visningsport på, fra grunnleggende bytting til egendefinerte enhetsprofiler og berøringstesting.

⁉️🤔 Ofte stilte spørsmål

Hvorfor ser nettstedet annerledes ut i Chrome DevTools og på en ekte iPhone?

Chrome på alle plattformer unntatt iOS bruker Blink-motoren. En ekte iPhone kjører på WebKit, dette er to forskjellige gjengivelsesmotorer med forskjellig håndtering av skrifter, utjevning, CSS-filtre og skygger. Derfor krever den endelige testen for iPhone en fysisk enhet, emulatoren vil vise bildet «som i Chrome på Mac», ikke «som i Safari på iPhone».

Hva er forskjellen mellom emulering og simulering i kontekst av DevTools?

Emulering reproduserer systemoppførsel på API- og protokollnivå: forfalsker brukeragenten, emulerer berøringshendelser, begrenser nettverksbåndbredde på nettlesernivå. Simulering er en mer overfladisk imitasjon som ikke påvirker lavnivåmekanismer. Enhetsmodus i Chrome er nettopp emulering, ikke simulering.

Kan du emulere en spesifikk versjon av iOS eller Android?

Nei. Enhetsmodus emulerer visningsport, brukeragent og berøringsinndata, men ikke operativsystemet og ikke nettlesermotorversjonen. Brukeragenten kan forfalskes manuelt via Network conditions → User agent, men gjengivelsen vil fortsatt være Blink-basert. For å teste under en spesifikk Safari/iOS-versjon trenger du enten en fysisk enhet eller en skytjeneste som BrowserStack.

Hvordan teste en PWA eller Service Worker i emulatoren?

Åpne Application-panelet i DevTools. I Service Workers-seksjonen, kryss av for Update on reload-flagget og merk av for Bypass for network om nødvendig. Emulatoren støtter frakoblet modus, aktiver den med avkrysningsboksen Offline på Network-fanen eller i Service Workers-panelet. PWA-manifestet sjekkes i Manifest-fanen, også i Application-panelet.

Hva gjør jeg hvis Enhetsverktøylinjen ikke er aktiv, ikonet er grått?

Den vanligste årsaken er at du er på en Chrome-serviceside (chrome://extensions, chrome://settings, ny DevTools-fane). Enhetsmodus fungerer bare på vanlige nettsider. Åpne en hvilken som helst http/https-side og prøv igjen.

Hva du skal gjøre når emulatoren ikke er nok

Enhetsmodus i Chrome DevTools dekker brorparten av responsive layoutoppgaver: bytte av visningsport, nettverksregulering, berøringsinndata, geolokalisering, mediespørringer, skjermbilder. For det daglige arbeidet til en frilanser eller et lite team er dette settet mer enn nok.

Men husk grensene. iOS-gjengivelse, maskinvaresensorer, ekte JS-ytelse på svak mobil maskinvare, alt dette forblir utenfor emuleringens rekkevidde. Gullstandarden: skriv og feilsøk layoutet i Enhetsmodus, og før hver utgivelse, gå gjennom sjekkpunkter på en fysisk iPhone og Android-smarttelefon. To enheter, femten minutter, og vissheten om at brukeren vil se nettstedet slik du hadde tenkt.