Sa töötad responsiivse kujunduse kallal, kontrollid seda lauaarvutis ja kõik näeb täiuslik välja. Avad selle nutitelefonis, kujundus laguneb, font muutub tikutoosi peaga sarnaseks ja nupp „Maksa" libiseb ekraani servast välja.

Tootehiiglased, kellel on eelarve QA laborite jaoks, saavad endale lubada iga ekraani jaoks päris seadmete parve ostmist. Mida aga peaks tegema vabakutseline, kolmeliikmeline idufirma või sooloarendaja? Vastus on Chrome'i sisseehitatud DevToolsi emulaator. Tasuta, käivitub ühe kiirklahvikombinatsiooniga ja katab valdava osa igapäevastest responsiivse testimise ülesannetest. Pole vaja täiendavat tarkvara installida, virtuaalmasinaid ega pilvefarme.

Allpool on samm-sammuline juhend Device Mode'i kohta: alates aktiveerimisest kuni võrgu piiramise ja anduri emulatsiooni peenhäälestuseni. Kõik, mida vajad saidi testimiseks nutitelefonides ja tahvelarvutites, lahkumata oma töösülearvutist.

💡 Kiirülevaade:

• Ava DevTools (F12 või Ctrl+Shift+I) ja luba seadme tööriistariba (Ctrl+Shift+M), leht lülitub mobiilse vaateava emulatsioonirežiimi.
• Vali rippmenüüst konkreetne mudel (iPhone, Pixel, Galaxy) või määra kohandatud resolutsioon pikslites, Chrome rakendab automaatselt sobiva kasutajaagendi.
• Seadista võrgu piiramine (Slow 3G / Fast 3G) ja luba puuteemulatsioon, et näha, kuidas sait laeb ja kuidas kasutajad sellega suhtlevad päris mobiilses internetis.
• Pea meeles piiranguid: emulaator ei reprodutseeri konkreetse seadme riistvaralist GPU-d, iOS-i fontide renderdamist ega Safari WebKiti käitumist, lõplikuks testimiseks on endiselt vajalik päris telefon.

Mis on Device Mode ja millal sellest piisab

Device Mode on tööriistade komplekt Chrome DevToolsis, mis emuleerib lehe vaatamist mobiilseadmes. See teeb korraga kolme asja:

• Emuleerib vaateava, surudes vaateala kokku valitud seadme füüsiliste ekraani mõõtmeteni. Näed saiti nii, nagu näeks seda iPhone 16 Pro Maxi või Samsung Galaxy S25 kasutaja.
• Võltsib kasutajaagenti, server saab mobiilsele brauserile tüüpilise stringi. Kriitilise tähtsusega saitide puhul, mis kasutavad dünaamilist serveerimist ja pakuvad erinevaid kujundusi lauaarvutile ja mobiilile.
• Lubab puuteemulatsiooni, hiirekursor muutub sõrme simulatsiooniks, toetades puutesündmusi, žeste ja mitmikpuudet.

Paneme kohe paika piirid. Device Mode EI emuleeri: Safari renderdusmootorit (WebKit), konkreetse mudeli riistvaralist kiirendust GPU-d, aku käitumist ja taustal töötavaid OS-i protsesse ega erinevate operaatorite mobiilsidevõrgu käitumist. Lõplikuks vastuvõtutestiks enne väljalaset on endiselt vaja füüsilist telefoni. Kuid igapäevaseks arenduseks ja silumiseks katab see tööriist vajadused suure varuga.

Kuidas avada Device Mode: kolm meetodit

Chrome pakub emulatsioonipaneelile mitut teed. Vali see, mis on sinu töövoos kiirem.

1. Meetod. Kiirklahvid, kõige kiirem

Kui oled Chrome'is, vajuta:

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

Kui DevTools pole veel avatud, avaneb see automaatselt koos emulatsioonipaneeliga. Uuesti vajutamine keelab Device Mode'i ja tagastab lehe tavavaatesse.

2. Meetod. Nupp DevToolsis

Ava DevTools (F12 või Ctrl+Shift+I). Paneeli vasakus ülanurgas, vahekaardi Elements kõrval, on telefoni ja tahvelarvuti ikoon Toggle device toolbar. Klõpsa sellel.

3. Meetod. Chrome'i peamenüü kaudu

Kolm punkti brauseri paremas ülanurgas → More Tools → Developer Tools. Seejärel Device Toolbar nupp, nagu 2. meetodis. See tee on pikem, kuid päästab, kui kiirklahvid ununesid keset öist juurutamist.

Seadme valik ja emulatsiooni seaded

Pärast Device Toolbari lubamist laaditakse leht uuesti ja selle kohale ilmub juhtpaneel. Vaatame iga elementi lähemalt.

Seadme rippmenüü

Keskne element, rippmenüü eelseadistatud profiilidega. Chrome'is on umbes viisteist eelseadistust: alates iPhone SE-st (kompaktsete ekraanide kontrollimiseks) kuni iPhone 16 Pro Maxini, Pixel 9-st kuni Galaxy S25-ni.

Vali seade ja Chrome ühe sammuga:

• määrab vaateava laiuse ja kõrguse;
• rakendab vastava kasutajaagendi;
• lubab puuteemulatsiooni (kui pole käsitsi keelatud).

Et lisada seade, mida nimekirjas pole, klõpsa samas rippmenüüs Edit... ja täida vorm: ekraani resolutsioon, Device Pixel Ratio, kasutajaagendi string. Kohandatud profiil ilmub üldnimekirja.

Käsitsi resolutsioon

Ei taha end konkreetse mudeliga siduda? Sisesta laiuse ja kõrguse väljadele suvalised numbrid. Tüüpiline stsenaarium: „kuidas näeb kujundus välja tavalisel keskmise hinnaklassi Android-nutitelefonil?", sisestad tüüpilise resolutsiooni ja saad kohe vastuse, ilma et peaksid nimekirjast õiget mudelit otsima.

Device pixel ratio

DPR määrab, mitu füüsilise ekraani pikslit vastab ühele CSS-pikslile. Kaasaegsetel lipulaevadel on DPR = 3, tahvelarvutitel ja odavamatel telefonidel 2. Chrome'i emulatsioonipaneel näitab valitud seadme praegust DPR väärtust ja võimaldab seda rippmenüü kaudu muuta. See mõjutab otseselt piltide ja SVG-ikoonide teravust võrkkesta ekraanidel.

Ekraani pööramine, võrgu piiramine ja andurid

Kolm lisaseadet, mis muudavad Device Mode'i lihtsast „suurendusklaasist" täisväärtuslikuks testimistööriistaks.

Ekraani pööramine

Kahe ringikujulise noolega ikoon vahetab laiuse ja kõrguse. Lülita alati portree- ja rõhtvaadet igal võtmeekraanil: saidi päis, tootekaart, maksevorm. Horisontaalne kerimine maandumislehel portreevaates on kriitiline viga, mida klient märkab kiiremini kui sina.

Võrgu piiramine

Rippmenüü No throttling võimaldab piirata laadimiskiirust. Saadaolevad eelseadistused:

• Slow 3G (400 Kbps), kehv mobiilne internet metroos, linnast väljas või keldris;
• Fast 3G (1.6 Mbps), tüüpiline mobiilne internet linnas;
• Slow 4G ja Fast 4G (4-25 Mbps), hea ühendus.

Pärast profiili valimist värskenda lehte ja vaata ajastusi Network paneelil. Kui fondid või hero-pildid laadivad Fast 3G korral kauem kui kolm sekundit, on aeglase internetiga kasutaja juba konkurendi juurde lahkunud.

Puuteemulatsioon

Vaikimisi lubatud mobiilseadme valimisel. Kursor muutub poolläbipaistvaks ringiks, simuleerides sõrmega puudutust. Kontrolli kolme asja:

• kas rippmenüüd töötavad puudutuse, mitte hõljumise peale;
• kas interaktiivsete elementide suurus on piisav, vastavalt WCAG 2.1 nõuetele on minimaalne puuteala 48×48 CSS pikslit;
• kas ei esine valesid hõljumisefekti käivitajaid, mida on füüsiliselt võimatu päris telefonil tekitada.

Geolokatsioon, meediapäringud ja andurid

Chrome on peitnud mitmeid kasulikke tööriistu DevToolsi paneeli sees olevasse „kolme punkti" menüüsse (⋮), jaotisesse More tools.

Geolokatsioon

Vahekaart Sensors (More tools → Sensors) võimaldab määrata suvalised laius- ja pikkuskraadi koordinaadid. Geolocation API-t kasutav sait saab määratud punkti päris asukoha asemel. Mugav piirkondlike hindade, automaatse liidese keeletuvastuse ja kohalike kampaaniate kontrollimiseks.

Meediapäringud

Paneel Rendering (More tools → Rendering) kuvab CSS-i meediapäringute murdepunktid otse lehe kohal. Luba lipp Show media queries, lehe kohale ilmub värviline skaala koos stiilivahetuse märgistega. Punktile klõpsamine seab vaateava koheselt vastavale laiusele. Asendamatu asi keeruliste murdepunktide silumisel.

Prefers-color-scheme ja prefers-reduced-motion

Samuti on paneelis Rendering lülitid:

• prefers-color-scheme, sunnib peale heleda või tumeda teema sõltumata OS-i seadetest;
• prefers-reduced-motion, emuleerib animatsiooni keelamise taotlust, kriitiline ligipääsetavuse testimisel.

Ekraanipildid ja ekraanisaadete salvestamine

Device Mode suudab emuleeritud lehest ekraanipilte teha. Kolm punkti Device Toolbar paneelil → Capture screenshot ja saad PNG täpselt selles suuruses, mida ekraanil näed. Täislehe kõrgusest ekraanipildi tegemiseks vali Capture full size screenshot, kasulik kujunduse kliendile või veateatesse saatmiseks.

Kui staatilistest ekraanipiltidest ei piisa, salvestab Chrome emuleeritud lehega töötamisest ekraanisaate. Ava paneel Recorder (More tools → Recorder), loo uus salvestus ja soorita toimingud, Chrome salvestab iga sammu ajatemplitega. Valmis salvestust saab eksportida Puppeteer skriptina ja automatiseerida kordustestimist pärast muudatusi.

Piirangud: millal ei saa ilma päris seadmeta hakkama

Chrome'i emulatsioon on võimas tööriist, kuid mitte imerohi. Siin on, mida see põhimõtteliselt ei kata:

• iOS-i renderdamine. Vastavalt Apple App Store'i reeglitele peavad kõik iPhone'i ja iPadi brauserid kasutama WebKiti mootorit, isegi Chrome ja Firefox on tehniliselt Safari WebView ümbrised. DevTools näitab Chromiumi mootori (Blink) renderdust ning erinevused fontide kuvamises, ümardamises, varjudes ja filtrites Blinki ja WebKiti vahel võivad olla märkimisväärsed.
• Riistvaraandurid. Güroskoop, baromeeter, NFC, riistvaraline videokiirendus, ükski neist ei eksisteeri emulaatoris ja vastavad API-d tagastavad null või vea.
• Madala aku käitumine. iOS ja Android lõpetavad agressiivselt taustalehtede töö kriitilise aku taseme korral. Emulaator seda ei reprodutseeri.
• Tegelik JavaScripti jõudlus. Mobiilne protsessor on mitu korda aeglasem kui lauaarvuti oma, animatsioonid, mis töösülearvutil „lendavad", võivad keskmise hinnaklassi telefonil hanguda. Mõõtmiseks kasuta Lighthouse'i koos CPU piiramisega.

Reegel on lihtne: vii kogu arendus- ja kujundustsükkel läbi Device Mode'is ning tee iga väljalase lõppkontroll vähemalt ühe füüsilise Android-seadme ja ühe iPhone'iga.

Lühike, kuid sisutihe video Chrome Developersi meeskonnalt: Jecelyn Yeen näitab viit viisi mobiilse vaateava emuleerimiseks, alates tavalisest lülitamisest kuni kohandatud seadmeprofiilide ja puutetestimiseni.

⁉️🤔 Korduma kippuvad küsimused

Miks näeb sait Chrome DevToolsis ja päris iPhone'is erinev välja?

Chrome kõigil platvormidel peale iOS-i kasutab Blinki mootorit. Päris iPhone töötab WebKitil, need on kaks erinevat renderdusmootorit, millel on erinev fontide, silumise, CSS-filtrite ja varjude käsitlemine. Seetõttu nõuab iPhone'i lõpptest füüsilist seadet, emulaator näitab pilti „nagu Chrome'is Macis", mitte „nagu Safaris iPhone'is".

Mis vahe on emulatsioonil ja simulatsioonil DevToolsi kontekstis?

Emulatsioon reprodutseerib süsteemi käitumist API ja protokolli tasemel: võltsib kasutajaagenti, emuleerib puutesündmusi, piirab võrgu ribalaiust brauseri tasemel. Simulatsioon on pealiskaudsem imitatsioon, mis ei mõjuta madala taseme mehhanisme. Device Mode Chrome'is on just nimelt emulatsioon, mitte simulatsioon.

Kas on võimalik emuleerida iOS-i või Androidi konkreetset versiooni?

Ei. Device Mode emuleerib vaateava, kasutajaagenti ja puutesisendit, kuid mitte operatsioonisüsteemi ega brauseri mootori versiooni. Kasutajaagenti saab käsitsi võltsida jaotise Network conditions → User agent kaudu, kuid renderdus jääb endiselt Blinkil põhinevaks. Konkreetse Safari/iOS-i versiooni all testimiseks on vaja kas füüsilist seadet või pilveteenust nagu BrowserStack.

Kuidas testida PWA-d või Service Workerit emulaatoris?

Ava DevToolsis Application paneel. Jaotises Service Workers märgi lipp Update on reload ja vajadusel Bypass for network. Emulaator toetab võrguühenduseta režiimi, luba see märkeruuduga Offline vahekaardil Network või Service Workersi paneelis. PWA manifesti kontrollitakse vahekaardil Manifest, samuti Application paneelis.

Mida teha, kui Device Toolbar pole aktiivne, ikoon on hall?

Kõige tavalisem põhjus on see, et oled Chrome'i teenuselehel (chrome://extensions, chrome://settings, DevToolsi uus vahekaart). Device Mode töötab ainult tavalistel veebilehtedel. Ava mõni http/https leht ja proovi uuesti.

Mida teha, kui emulaatorist ei piisa

Device Mode Chrome DevToolsis katab lõviosa responsiivse kujunduse ülesannetest: vaateava vahetamine, võrgu piiramine, puutesisend, geolokatsioon, meediapäringud, ekraanipildid. Vabakutselise või väikese meeskonna igapäevatööks on sellest komplektist enam kui küll.

Kuid pea meeles piire. iOS-i renderdus, riistvaraandurid, tegelik JS-i jõudlus nõrgal mobiilsel riistvaral, kõik see jääb emulatsioonist välja. Kuldstandard: kirjuta ja silu kujundust Device Mode'is ning enne iga väljalaset läbi kontrollpunktid füüsilises iPhone'is ja Android-nutitelefonis. Kaks seadet, viisteist minutit ja kindlustunne, et kasutaja näeb saiti sellisena, nagu sa kavandasid.