Du jobbar med en responsiv layout, kollar den på datorn och allt ser perfekt ut. Du öppnar den på en smartphone, layouten bryts ihop, teckensnittet blir lika litet som ett tändstickshuvud och "Betala"-knappen glider iväg utanför skärmkanten.

Produktjättar med budget för QA-labb har råd att köpa en hel flotta av fysiska enheter för varje skärm. Men vad ska en frilansare, en startup med tre personer eller en ensam utvecklare göra? Svaret är Chromes inbyggda emulator i DevTools. Gratis, startas med ett enda kortkommando och täcker de allra flesta vardagliga testuppgifterna för responsiv design. Ingen extra programvara att installera, inga virtuella maskiner, inga molnfarmer.

Här är en steg-för-steg-guide till Device Mode: från aktivering till finjustering av nätverksbegränsning och sensoremulering. Allt du behöver för att testa en sajt på smartphones och surfplattor utan att lämna din jobbdator.

💡 Snabb översikt:

• Öppna DevTools (F12 eller Ctrl+Shift+I) och aktivera enhetsverktygsfältet (Ctrl+Shift+M), så växlar sidan till mobilt vyportsemuleringsläge.
• Välj en specifik modell från rullgardinslistan (iPhone, Pixel, Galaxy) eller ställ in en anpassad upplösning i pixlar, så tillämpar Chrome automatiskt rätt user agent.
• Konfigurera nätverksbegränsning (Slow 3G / Fast 3G) och aktivera touchemulering för att se hur sajten laddas och interagerar med användare på riktigt mobilt internet.
• Kom ihåg begränsningarna: emulatorn återger inte en specifik enhets hårdvaru-GPU, iOS teckensnittsrendering eller Safari WebKit-beteende, en riktig telefon är fortfarande nödvändig för slutgiltig testning.

Vad Device Mode är och när det räcker

Device Mode är en uppsättning verktyg i Chrome DevTools som emulerar hur en sida visas på en mobil enhet. Det gör tre saker samtidigt:

• Emulerar vyporten, pressar ihop visningsytan till den valda enhetens fysiska skärmdimensioner. Du ser sajten som en användare av en iPhone 16 Pro Max eller Samsung Galaxy S25 skulle se den.
• Fejkar user agent, servern tar emot en sträng som är typisk för en mobil webbläsare. Avgörande för sajter med dynamisk servering som levererar olika layouter till dator och mobil.
• Aktiverar touchemulering, muspekaren förvandlas till en fingersimulering, med stöd för touch-händelser, gester och multi-touch.

Låt oss direkt slå fast gränserna. Device Mode emulerar INTE: Safaris renderingsmotor (WebKit), hårdvaruacceleration GPU för en specifik modell, batteribeteende och bakgrundsprocesser i operativsystemet, eller olika mobiloperatörers nätverksbeteende. För det slutgiltiga acceptanstestet inför release behövs fortfarande en fysisk telefon. Men för daglig utveckling och felsökning täcker verktyget behoven med råge.

Hur man öppnar Device Mode: tre metoder

Chrome erbjuder flera vägar till emuleringspanelen. Välj den som går snabbast i ditt arbetsflöde.

Metod 1. Kortkommandon, det snabbaste

Medan du är i Chrome, tryck:

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

Om DevTools inte redan är öppet öppnas det automatiskt tillsammans med emuleringspanelen. Tryck igen för att inaktivera Device Mode och återställa sidan till normal vy.

Metod 2. Knapp i DevTools

Öppna DevTools (F12 eller Ctrl+Shift+I). I panelens övre vänstra hörn, bredvid fliken Elements, finns en telefon- och surfplatteikon, Toggle device toolbar. Klicka på den.

Metod 3. Via Chromes huvudmeny

Tre punkter i webbläsarens övre högra hörn → More Tools → Developer Tools. Därefter knappen för enhetsverktygsfältet, som i metod 2. Vägen är längre, men den räddar dig om kortkommandon fallit ur minnet mitt under en midnattsdeploy.

Enhetsval och emuleringsinställningar

När du har aktiverat enhetsverktygsfältet laddas sidan om och en kontrollpanel visas ovanför den. Låt oss bryta ner varje element.

Rullgardinslista för enheter

Det centrala elementet, en rullgardinslista med förinställda profiler. Chrome levereras med ett femton-tal förinställningar: från iPhone SE (för att kolla kompakta skärmar) till iPhone 16 Pro Max, från Pixel 9 till Galaxy S25.

Välj en enhet, så gör Chrome i ett steg:

• ställer in vyportens bredd och höjd;
• tillämpar motsvarande user agent;
• aktiverar touchemulering (om det inte inaktiverats manuellt).

För att lägga till en enhet som inte finns i listan, klicka på Edit... i samma rullgardinsmeny och fyll i formuläret: skärmupplösning, Device Pixel Ratio, user agent-sträng. Den anpassade profilen visas i den allmänna listan.

Manuell upplösning

Vill du inte binda dig till en specifik modell? Ange godtyckliga siffror i fälten för bredd och höjd. Typiskt scenario: "hur ser layouten ut på en vanlig Android-smartphone i mellanklassen?", du anger en typisk upplösning och får svaret direkt, utan att leta efter rätt modell i listan.

Device pixel ratio

DPR avgör hur många fysiska skärmpixlar som motsvarar en CSS-pixel. Moderna flaggskepp har DPR = 3, surfplattor och budgettelefoner har 2. I Chromes emuleringspanel visas det aktuella DPR-värdet för den valda enheten och låter dig ändra det via rullgardinslistan. Detta påverkar direkt skärpan på bilder och SVG-ikoner på retinaskärmar.

Skärmrotation, nätverksbegränsning och sensorer

Tre ytterligare inställningar som förvandlar Device Mode från ett enkelt "förstoringsglas" till ett fullfjädrat testverktyg.

Skärmrotation

Ikonen med två cirkulära pilar byter plats på bredd och höjd. Växla alltid stående ↔ liggande på varje nyckelskärm: sajtens sidhuvud, produktkort, betalningsformulär. Horisontell scrollning på en landningssida i stående orientering är ett kritiskt fel som kunden märker snabbare än du.

Nätverksbegränsning

Rullgardinsmenyn No throttling låter dig begränsa laddningshastigheten. Tillgängliga förinställningar:

• Slow 3G (400 Kbps), dåligt mobilt internet i tunnelbanan, utanför staden eller i en källare;
• Fast 3G (1,6 Mbps), typiskt mobilt internet i staden;
• Slow 4G och Fast 4G (4-25 Mbps), bra anslutning.

När du har valt en profil, uppdatera sidan och titta på tidslinjerna i panelen Network. Om typsnitt eller hero-bilder tar längre än tre sekunder att ladda på Fast 3G har en användare på långsamt internet redan gått till en konkurrent.

Touchemulering

Aktiverat som standard när du väljer en mobil enhet. Pekaren förvandlas till en genomskinlig cirkel som simulerar ett fingertryck. Kontrollera tre saker:

• fungerar rullgardinsmenyer vid tryck, inte vid hover;
• är storleken på interaktiva element tillräcklig, enligt WCAG 2.1 är den minsta touch-ytan 48×48 CSS-pixlar;
• finns det inga falska hover-effektutlösare som är fysiskt omöjliga att återskapa på en riktig telefon.

Geolokalisering, media queries och sensorer

Chrome har gömt flera användbara verktyg i menyn "tre punkter" (⋮) inuti DevTools-panelen, under sektionen More tools.

Geolokalisering

Fliken Sensors (More tools → Sensors) låter dig ange godtyckliga latitud- och longitudkoordinater. En sajt som använder Geolocation API tar emot den angivna punkten istället för den verkliga. Praktiskt för att kontrollera regionala priser, automatisk språkdetektering i gränssnittet och lokala kampanjer.

Media queries

Panelen Rendering (More tools → Rendering) visar CSS media query-brytpunkter direkt ovanför sidan. Aktivera flaggan Show media queries, så visas en färgad skala med markeringar för stilbyten ovanför sidan. Ett klick på en punkt ställer omedelbart in vyporten till motsvarande bredd. En oumbärlig sak vid felsökning av komplexa brytpunkter.

Prefers-color-scheme och prefers-reduced-motion

Även i panelen Rendering finns växlare:

• prefers-color-scheme, tvingar ljust eller mörkt tema oavsett operativsystemets inställningar;
• prefers-reduced-motion, emulerar en begäran om att inaktivera animation, avgörande för tillgänglighetstestning.

Skärmdumpar och skärminspelning

Device Mode kan ta skärmdumpar av den emulerade sidan. Tre punkter i panelen för enhetsverktygsfältet → Capture screenshot, så får du en PNG i exakt den storlek du ser på skärmen. För en skärmdump av hela sidans höjd, välj Capture full size screenshot, användbart för att skicka layouten till en kund eller i en buggrapport.

Om statiska skärmdumpar inte räcker spelar Chrome in en skärminspelning av arbetet med den emulerade sidan. Öppna panelen Recorder (More tools → Recorder), skapa en ny inspelning och utför åtgärder, Chrome spelar in varje steg med tidsstämplar. Den färdiga inspelningen kan exporteras som ett Puppeteer-skript och automatisera omtestning efter redigeringar.

Begränsningar: när du inte klarar dig utan en riktig enhet

Chrome-emulering är ett kraftfullt verktyg, men ingen universallösning. Här är vad det i grunden inte täcker:

• iOS-rendering. Enligt Apple App Store-reglerna måste alla webbläsare på iPhone och iPad använda WebKit-motorn, även Chrome och Firefox är tekniskt sett omslag runt Safari WebView. DevTools visar renderingen från Chromium-motorn (Blink), och skillnader i teckensnittsvisning, avrundning, skuggor och filter mellan Blink och WebKit kan vara betydande.
• Hårdvarusensorer. Gyroskop, barometer, NFC, hårdvaruvideoacceleration, inget av detta finns i emulatorn, och motsvarande API:er returnerar null eller ett fel.
• Beteende vid lågt batteri. iOS och Android avlastar aggressivt bakgrundsflikar vid kritiska batterinivåer. Emulatorn återger inte detta.
• Verklig JavaScript-prestanda. En mobilprocessor är många gånger långsammare än en datorprocessor, animationer som "flyger" på en jobbdator kan frysa på en mellanklasstelefon. För mätning, använd Lighthouse med CPU-begränsning.

Regeln är enkel: genomför hela utvecklings- och layoutcykeln i Device Mode, och utför den slutliga kontrollen av varje release på minst en fysisk Android-enhet och en iPhone.

En kort men innehållsrik video från Chrome Developers-teamet: Jecelyn Yeen visar fem sätt att emulera mobil vyport, från grundläggande växling till anpassade enhetsprofiler och touch-testning.

⁉️🤔 Vanliga frågor

Varför ser sajten annorlunda ut i Chrome DevTools och på en riktig iPhone?

Chrome på alla plattformar utom iOS använder Blink-motorn. En riktig iPhone körs på WebKit, det är två olika renderingsmotorer med olika hantering av teckensnitt, utjämning, CSS-filter och skuggor. Därför kräver det slutliga testet för iPhone en fysisk enhet, emulatorn visar bilden "som i Chrome på Mac", inte "som i Safari på iPhone".

Vad är skillnaden mellan emulering och simulering i DevTools-sammanhang?

Emulering återger systembeteende på API- och protokollnivå: fejkar user agent, emulerar touch-händelser, begränsar nätverksbandbredd på webbläsarnivå. Simulering är en mer ytlig imitation som inte påverkar lågnivåmekanismer. Device Mode i Chrome är just emulering, inte simulering.

Kan man emulera en specifik version av iOS eller Android?

Nej. Device Mode emulerar vyport, user agent och touch-inmatning, men inte operativsystemet och inte webbläsarmotorns version. User agent kan fejkas manuellt via Network conditions → User agent, men renderingen förblir fortfarande Blink-baserad. För att testa under en specifik Safari/iOS-version behöver du antingen en fysisk enhet eller en molntjänst som BrowserStack.

Hur testar man en PWA eller Service Worker i emulatorn?

Öppna panelen Application i DevTools. I sektionen Service Workers, markera flaggan Update on reload och kryssa i Bypass for network vid behov. Emulatorn stöder offlineläge, aktivera det med kryssrutan Offline på fliken Network eller i panelen Service Workers. PWA-manifestet kontrolleras på fliken Manifest, också i panelen Application.

Vad gör man om enhetsverktygsfältet inte är aktivt, ikonen är grå?

Den vanligaste orsaken är att du är på en Chrome-servicesida (chrome://extensions, chrome://settings, ny flik för DevTools). Device Mode fungerar bara på vanliga webbsidor. Öppna valfri http/https-sida och försök igen.

Vad man gör när emulatorn inte räcker till

Device Mode i Chrome DevTools täcker lejonparten av uppgifterna för responsiv layout: vyportsväxling, nätverksbegränsning, touch-inmatning, geolokalisering, media queries, skärmdumpar. För det dagliga arbetet för en frilansare eller ett litet team är denna uppsättning mer än tillräcklig.

Men kom ihåg gränserna. iOS-rendering, hårdvarusensorer, verklig JS-prestanda på svag mobil hårdvara, allt detta förblir bortom emulering. Guldstandarden: skriv och felsök layouten i Device Mode, och gå före varje release igenom kontrollpunkter på en fysisk iPhone och Android-smartphone. Två enheter, femton minuter, och vissheten om att användaren ser sajten så som du avsåg.