Työskentelet responsiivisen asettelun parissa, tarkistat sitä työpöydällä ja kaikki näyttää täydelliseltä. Avaat sen älypuhelimella, asettelu hajoaa, fontti kutistuu tulitikun pään kokoiseksi ja "Maksa"-painike liukuu ruudun reunan yli.

Tuotejätit, joilla on budjettia QA-laboratorioihin, voivat hankkia laivastollisen oikeita laitteita jokaista näyttökokoa varten. Mutta mitä tehdä freelancerina, kolmen hengen startupissa tai yksin kehittävänä? Vastaus on Chromen sisäänrakennettu DevTools-emulaattori. Ilmainen, käynnistyy yhdellä pikanäppäinyhdistelmällä ja kattaa valtaosan jokapäiväisistä responsiivisen testauksen tehtävistä. Ei asennettavia lisäohjelmia, ei virtuaalikoneita, ei pilvipalvelinfarmeja.

Alla on vaiheittainen opas Device Modeen: aktivointi, verkon kuristuksen ja anturiemulaation hienosäätö. Kaikki mitä tarvitset sivuston testaamiseen älypuhelimilla ja tableteilla poistumatta työkannettavaltasi.

💡 Pikaopas:

• Avaa DevTools (F12 tai Ctrl+Shift+I) ja ota Device Toolbar käyttöön (Ctrl+Shift+M), sivu siirtyy mobiilinäkymän emulointitilaan.
• Valitse tietty malli pudotusvalikosta (iPhone, Pixel, Galaxy) tai aseta mukautettu resoluutio pikseleinä, Chrome ottaa automaattisesti käyttöön sopivan user agentin.
• Määritä verkon kuristus (Slow 3G / Fast 3G) ja ota kosketusemulointi käyttöön nähdäksesi, miten sivusto latautuu ja toimii käyttäjien kanssa oikeassa mobiiliverkossa.
• Muista rajoitukset: emulaattori ei toista tietyn laitteen laitteistokiihdytystä (GPU), iOS-fonttien renderöintiä tai Safari WebKit -toimintaa, oikea puhelin on edelleen välttämätön lopulliseen testaukseen.

Mikä Device Mode on ja milloin se riittää

Device Mode on joukko työkaluja Chrome DevToolsissa, jotka emuloivat sivun katselua mobiililaitteella. Se tekee kolme asiaa samanaikaisesti:

• Emuloi näkymän, puristaen katselualueen valitun laitteen fyysisiin näytön mittoihin. Näet sivuston kuten iPhone 16 Pro Maxin tai Samsung Galaxy S25:n käyttäjä sen näkisi.
• Väärentää user agentin, palvelin vastaanottaa mobiiliselaimelle tyypillisen merkkijonon. Kriittistä sivustoille, joissa on dynaaminen palvelinpuolen renderöinti, joka tarjoaa eri asettelut työpöydälle ja mobiilille.
• Ottaa käyttöön kosketusemulaation, hiiren osoitin muuttuu sormisimulaatioksi, joka tukee kosketustapahtumia, eleitä ja monikosketusta.

Vedetään heti rajat. Device Mode EI emuloi: Safari-renderöintimoottoria (WebKit), tietyn mallin laitteistokiihdytystä (GPU), akun käyttäytymistä ja taustaprosesseja tai eri operaattoreiden mobiiliverkon käyttäytymistä. Julkaisua edeltävään lopulliseen hyväksymistestiin tarvitaan edelleen fyysinen puhelin. Mutta päivittäiseen kehitykseen ja virheenkorjaukseen työkalu kattaa tarpeet reilusti.

Miten Device Mode avataan: kolme tapaa

Chrome tarjoaa useita polkuja emulointipaneeliin. Valitse se, joka on nopein omassa työnkulussasi.

Tapa 1. Pikanäppäimet, nopein

Kun olet Chromessa, paina:

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

Jos DevTools ei ole vielä auki, se avautuu automaattisesti yhdessä emulointipaneelin kanssa. Uudelleen painaminen poistaa Device Moden käytöstä ja palauttaa sivun normaalitilaan.

Tapa 2. Painike DevToolsissa

Avaa DevTools (F12 tai Ctrl+Shift+I). Paneelin vasemmassa yläkulmassa, Elements-välilehden vieressä, on puhelimen ja tabletin kuvake, Toggle device toolbar. Klikkaa sitä.

Tapa 3. Chromen päävalikon kautta

Kolme pistettä selaimen oikeassa yläkulmassa → More Tools → Developer Tools. Sitten Device Toolbar -painike, kuten tavassa 2. Polku on pidempi, mutta se pelastaa, jos pikanäppäimet unohtuvat kesken keskiyön julkaisun.

Laitteen valinta ja emulointiasetukset

Kun Device Toolbar on otettu käyttöön, sivu latautuu uudelleen ja sen yläpuolelle ilmestyy ohjauspaneeli. Käydään läpi jokainen elementti.

Laitteen pudotusvalikko

Keskeinen elementti, pudotusvalikko esiasetetuilla profiileilla. Chromessa on noin viisitoista esiasetusta: iPhone SE:stä (kompaktien näyttöjen tarkistamiseen) iPhone 16 Pro Maxiin, Pixel 9:stä Galaxy S25:een.

Valitse laite, ja Chrome yhdellä kertaa:

• asettaa näkymän leveyden ja korkeuden;
• ottaa käyttöön vastaavan user agentin;
• ottaa käyttöön kosketusemulaation (ellei sitä ole manuaalisesti poistettu käytöstä).

Jos haluat lisätä laitteen, joka ei ole listalla, klikkaa samassa pudotusvalikossa Edit... ja täytä lomake: näytön resoluutio, Device Pixel Ratio, user agent -merkkijono. Mukautettu profiili ilmestyy yleiseen listaan.

Manuaalinen resoluutio

Etkö halua sitoa itseäsi tiettyyn malliin? Syötä mielivaltaiset numerot leveys- ja korkeuskenttiin. Tyypillinen skenaario: "miltä asettelu näyttää tavallisella keskitason Android-älypuhelimella?", syötät tyypillisen resoluution ja saat heti vastauksen, etsimättä oikeaa mallia listalta.

Device Pixel Ratio

DPR määrittää, kuinka monta fyysistä näytön pikseliä vastaa yhtä CSS-pikseliä. Nykyaikaisissa lippulaivamalleissa DPR = 3, tableteissa ja edullisissa puhelimissa 2. Chromen emulointipaneelissa se näyttää valitun laitteen nykyisen DPR-arvon ja antaa muuttaa sitä pudotusvalikon kautta. Tämä vaikuttaa suoraan kuvien ja SVG-kuvakkeiden terävyyteen retina-näytöillä.

Näytön kierto, verkon kuristus ja anturit

Kolme lisäasetusta, jotka muuttavat Device Moden yksinkertaisesta "suurennuslasista" täysimittaiseksi testaustyökaluksi.

Näytön kierto

Kahden ympyränuolen kuvake vaihtaa leveyden ja korkeuden keskenään. Vaihda aina pysty- ja vaakasuunnan välillä jokaisella keskeisellä näytöllä: sivuston ylätunniste, tuotekortti, maksulomake. Vaakasuuntainen vieritys aloitussivulla pystyasennossa on kriittinen virhe, jonka asiakas huomaa sinua nopeammin.

Verkon kuristus

No throttling -pudotusvalikko mahdollistaa latausnopeuden rajoittamisen. Saatavilla olevat esiasetukset:

• Slow 3G (400 Kbps), heikko mobiiliverkko metrossa, kaupungin ulkopuolella tai kellarissa;
• Fast 3G (1,6 Mbps), tyypillinen mobiiliverkko kaupungissa;
• Slow 4G ja Fast 4G (4-25 Mbps), hyvä yhteys.

Kun olet valinnut profiilin, päivitä sivu ja katso ajoituksia Network-paneelissa. Jos fontit tai hero-kuvat latautuvat yli kolme sekuntia Fast 3G:llä, hitaan verkon käyttäjä on jo siirtynyt kilpailijalle.

Kosketusemulointi

Oletuksena käytössä, kun valitaan mobiililaite. Kursori muuttuu läpikuultavaksi ympyräksi, joka simuloi sormen napautusta. Tarkista kolme asiaa:

• toimivatko pudotusvalikot napauttamalla, eivät hoverilla;
• onko interaktiivisten elementtien koko riittävä, WCAG 2.1 -ohjeistuksen mukaan kosketuskohteen vähimmäiskoko on 48×48 CSS-pikseliä;
• esiintyykö vääriä hover-efektien laukaisijoita, jotka ovat fyysisesti mahdottomia toistaa oikealla puhelimella.

Sijainti, media queries ja anturit

Chrome on piilottanut useita hyödyllisiä työkaluja "kolmen pisteen" valikkoon (⋮) DevTools-paneelin sisällä, More tools -osiossa.

Sijainti

Sensors-välilehti (More tools → Sensors) mahdollistaa mielivaltaisten leveys- ja pituuskoordinaattien asettamisen. Geolocation API:a käyttävä sivusto vastaanottaa määritetyn pisteen oikean sijainnin sijasta. Kätevää alueellisten hintojen, automaattisen käyttöliittymän kielen tunnistuksen ja paikallisten kampanjoiden tarkistamiseen.

Media queries

Rendering-paneeli (More tools → Rendering) näyttää CSS-media query -katkaisupisteet suoraan sivun päällä. Ota käyttöön Show media queries -lippu, sivun yläpuolelle ilmestyy värillinen asteikko tyylinvaihtomerkintöineen. Pisteen klikkaaminen asettaa näkymän välittömästi vastaavaan leveyteen. Korvaamaton asia monimutkaisten katkaisupisteiden virheenkorjauksessa.

Prefers-color-scheme ja prefers-reduced-motion

Myös Rendering-paneelissa on kytkimet:

• prefers-color-scheme, pakottaa vaalean tai tumman teeman käyttöjärjestelmän asetuksista riippumatta;
• prefers-reduced-motion, emuloi pyyntöä poistaa animaatiot käytöstä, kriittistä saavutettavuustestauksessa.

Kuvakaappaukset ja screencast-tallennus

Device Mode voi ottaa kuvakaappauksia emuloidusta sivusta. Kolme pistettä Device Toolbar -paneelissa → Capture screenshot, ja saat PNG-kuvan juuri siinä koossa kuin näet ruudulla. Koko sivun korkuisen kuvakaappauksen saat valitsemalla Capture full size screenshot, hyödyllistä asettelun lähettämiseen asiakkaalle tai virheraporttiin.

Jos staattiset kuvakaappaukset eivät riitä, Chrome tallentaa screencastin työskentelystä emuloidulla sivulla. Avaa Recorder-paneeli (More tools → Recorder), luo uusi tallennus ja suorita toiminnot, Chrome tallentaa jokaisen vaiheen aikaleimoineen. Valmis tallennus voidaan viedä Puppeteer-skriptinä ja automatisoida uudelleentestaus muokkausten jälkeen.

Rajoitukset: milloin et pärjää ilman oikeaa laitetta

Chromen emulointi on tehokas työkalu, mutta ei taikaluoti. Tässä on, mitä se ei pohjimmiltaan kata:

• iOS-renderöinti. Apple App Storen sääntöjen mukaan kaikkien selainten iPhonella ja iPadilla on käytettävä WebKit-moottoria, jopa Chrome ja Firefox ovat teknisesti kääreitä Safari WebView'n ympärillä. DevTools näyttää Chromium-moottorin (Blink) renderöinnin, ja erot fonttien näytössä, pyöristyksissä, varjoissa ja suodattimissa Blinkin ja WebKitin välillä voivat olla merkittäviä.
• Laitteistoanturit. Gyroskooppi, barometri, NFC, laitteistovideokiihdytys, mitään näistä ei ole emulaattorissa, ja vastaavat API:t palauttavat null tai virheen.
• Alhaisen akun käyttäytyminen. iOS ja Android sulkevat aggressiivisesti taustavälilehtiä kriittisillä akun varauksilla. Emulaattori ei toista tätä.
• Todellinen JavaScript-suorituskyky. Mobiiliprosessori on monta kertaa hitaampi kuin työpöytäprosessori, animaatiot, jotka "lentävät" työkannettavalla, voivat jäätyä keskitason puhelimella. Mittaamiseen käytä Lighthousea CPU-kuristuksella.

Sääntö on yksinkertainen: suorita koko kehitys- ja taittosykli Device Modessa, ja tee jokaisen julkaisun lopullinen tarkistus vähintään yhdellä fyysisellä Android-laitteella ja yhdellä iPhonella.

Lyhyt mutta tiivis video Chrome Developers -tiimiltä: Jecelyn Yeen näyttää viisi tapaa emuloida mobiilinäkymää, perusvaihdosta mukautettuihin laiteprofiileihin ja kosketustestaukseen.

⁉️🤔 Usein kysytyt kysymykset

Miksi sivusto näyttää erilaiselta Chrome DevToolsissa ja oikealla iPhonella?

Chrome kaikilla alustoilla iOS:ää lukuun ottamatta käyttää Blink-moottoria. Oikea iPhone toimii WebKitillä, nämä ovat kaksi eri renderöintimoottoria, joilla on erilainen fonttien, pehmennyksen, CSS-suodattimien ja varjojen käsittely. Siksi iPhonen lopullinen testi vaatii fyysisen laitteen, emulaattori näyttää kuvan "kuten Chromessa Macilla", ei "kuten Safarissa iPhonella".

Mitä eroa on emulaatiolla ja simulaatiolla DevToolsin kontekstissa?

Emulaatio toistaa järjestelmän käyttäytymistä API- ja protokollatasolla: väärentää user agentin, emuloi kosketustapahtumia, rajoittaa verkon kaistanleveyttä selaintasolla. Simulaatio on pinnallisempaa jäljittelyä, joka ei vaikuta matalan tason mekanismeihin. Device Mode Chromessa on nimenomaan emulaatiota, ei simulaatiota.

Voiko tiettyä iOS- tai Android-versiota emuloida?

Ei. Device Mode emuloi näkymää, user agentia ja kosketussyötettä, mutta ei käyttöjärjestelmää eikä selainmoottorin versiota. User agentin voi väärentää manuaalisesti kohdasta Network conditions → User agent, mutta renderöinti pysyy silti Blink-pohjaisena. Testataksesi tietyllä Safari/iOS-versiolla tarvitset joko fyysisen laitteen tai pilvipalvelun, kuten BrowserStack.

**Miten testata PWA:ta tai **Service Workeria emulaattorissa?

Avaa Application-paneeli DevToolsissa. Service Workers -osiossa, valitse Update on reload -lippu ja merkitse Bypass for network tarvittaessa. Emulaattori tukee offline-tilaa, ota se käyttöön Offline-valintaruudulla Network-välilehdellä tai Service Workers -paneelissa. PWA-manifesti tarkistetaan Manifest-välilehdellä, myös Application-paneelissa.

Mitä tehdä, jos Device Toolbar ei ole aktiivinen, kuvake on harmaana?

Yleisin syy on, että olet Chromen palvelusivulla (chrome://extensions, chrome://settings, DevToolsin uusi välilehti). Device Mode toimii vain tavallisilla verkkosivuilla. Avaa mikä tahansa http/https-sivu ja yritä uudelleen.

Mitä tehdä, kun emulaattori ei riitä

Device Mode Chrome DevToolsissa kattaa leijonanosan responsiivisen asettelun tehtävistä: näkymän vaihdon, verkon kuristuksen, kosketussyötteen, sijainnin, media queryt, kuvakaappaukset. Freelancerin tai pienen tiimin päivittäiseen työhön tämä setti on enemmän kuin tarpeeksi.

Mutta muista rajat. iOS-renderöinti, laitteistoanturit, todellinen JS-suorituskyky heikolla mobiililaitteistolla, kaikki tämä jää emulaation ulkopuolelle. Kultainen standardi: kirjoita ja debuggaa asettelu Device Modessa, ja ennen jokaista julkaisua käy läpi tarkistuspisteet fyysisellä iPhonella ja Android-älypuhelimella. Kaksi laitetta, viisitoista minuuttia, ja varmuus siitä, että käyttäjä näkee sivuston sellaisena kuin tarkoitit sen.