Układa Pan/Pani adaptacyjny layout, sprawdza na desktopie, wszystko trzyma się idealnie. Otwiera Pan/Pani na smartfonie, layout się rozjechał, czcionka zrobiła się wielkości główki od zapałki, a przycisk „Zapłać" wypełzł poza krawędź ekranu.

Na zakup parku rzeczywistych urządzeń pod każdy ekran stać gigantów produktowych z budżetem na laboratorium QA. A co ma zrobić freelancer, startup z trzema deweloperami czy solo-koder? Odpowiedź: wbudowany emulator Chrome DevTools. Bezpłatny, uruchamia się jedną kombinacją klawiszy i pokrywa zdecydowaną większość codziennych zadań związanych ze sprawdzaniem responsywności. Bez instalowania dodatkowych programów, bez wirtualnych maszyn, bez chmurowych farm.

Poniżej znajduje się przewodnik krok po kroku po Device Mode: od włączenia po zaawansowaną konfigurację ograniczania przepustowości sieci i emulacji czujników. Wszystko, czego potrzeba, aby sprawdzić witrynę na smartfonach i tabletach, nie odrywając się od służbowego laptopa.

💡 Szybki przegląd:

• Proszę otworzyć DevTools (F12 lub Ctrl+Shift+I) i włączyć Device Toolbar (Ctrl+Shift+M), strona przełączy się w tryb emulacji mobilnego viewportu.
• Proszę wybrać konkretny model z listy rozwijanej (iPhone, Pixel, Galaxy) lub ustawić dowolną rozdzielczość w pikselach, Chrome automatycznie podstawi odpowiedniego user agenta.
• Proszę skonfigurować ograniczanie przepustowości sieci (Slow 3G / Fast 3G) i włączyć emulację wprowadzania dotykowego, zobaczy Pan/Pani, jak witryna ładuje się i wchodzi w interakcję z użytkownikiem na realnym mobilnym internecie.
• Proszę pamiętać o ograniczeniach: emulator nie odwzorowuje sprzętowego GPU konkretnego urządzenia, renderowania czcionek iOS ani specyfiki Safari WebKit, do finalnego testu rzeczywisty telefon jest wciąż niezbędny.

Czym jest Device Mode i kiedy jest wystarczający

Device Mode to zestaw narzędzi wewnątrz Chrome DevTools, który emuluje przeglądanie strony na urządzeniu mobilnym. Robi trzy rzeczy jednocześnie:

• Emuluje viewport, ściska obszar wyświetlania do fizycznych wymiarów ekranu wybranego urządzenia. Widzi Pan/Pani witrynę tak, jak zobaczy ją użytkownik iPhone 16 Pro Max lub Samsung Galaxy S25.
• Podmienia user agenta, serwer otrzymuje ciąg znaków charakterystyczny dla przeglądarki mobilnej. Krytyczne dla witryn z dynamicznym serwowaniem, które dostarczają inny layout na desktop i na urządzenia mobilne.
• Włącza emulację dotyku, kursor myszy zamienia się w imitację palca, pojawia się obsługa zdarzeń dotykowych, gestów i multidotyku.

Od razu określmy granice. Device Mode NIE emuluje: silnika renderującego Safari (WebKit), sprzętowego przyspieszania GPU konkretnego modelu, zachowania baterii i procesów w tle systemu operacyjnego, specyfiki sieci komórkowych różnych operatorów. Do finalnego testu akceptacyjnego przed wydaniem fizyczny telefon i tak będzie potrzebny. Ale do codziennego kodowania layoutu i debugowania narzędzie pokrywa potrzeby z nawiązką.

Jak otworzyć Device Mode: trzy sposoby

Chrome oferuje kilka ścieżek do panelu emulacji. Proszę wybrać tę, która jest szybsza w Pana/Pani workflow.

Sposób 1. Skróty klawiszowe, najszybszy

Będąc w Chrome, proszę nacisnąć:

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

Jeśli DevTools nie jest jeszcze otwarty, otworzy się automatycznie wraz z panelem emulacji. Ponowne naciśnięcie wyłącza Device Mode i przywraca normalny widok strony.

Sposób 2. Przycisk w DevTools

Proszę otworzyć DevTools (F12 lub Ctrl+Shift+I). W lewym górnym rogu panelu, obok zakładki Elements, znajduje się ikona telefonu i tabletu, Toggle device toolbar. Proszę ją kliknąć.

Sposób 3. Przez menu główne Chrome

Trzy kropki w prawym górnym rogu przeglądarki → More Tools → Developer Tools. Następnie przycisk Device Toolbar, jak w sposobie 2. Ścieżka jest dłuższa, ale ratuje, gdy skróty klawiszowe wylecą z głowy w środku nocnego wdrożenia.

Wybór urządzenia i konfiguracja emulacji

Po włączeniu Device Toolbar strona przeładuje się, a nad nią pojawi się panel sterowania emulacją. Przeanalizujmy każdy element.

Lista rozwijana urządzeń

Centralny element, lista rozwijana z predefiniowanymi profilami. Chrome dostarcza kilkanaście presetów: od iPhone SE (do sprawdzania kompaktowych ekranów) po iPhone 16 Pro Max, od Pixel 9 po Galaxy S25.

Proszę wybrać urządzenie, a Chrome w jednym kroku:

• ustawi szerokość i wysokość viewportu;
• podstawi odpowiedniego user agenta;
• włączy emulację dotyku (jeśli nie wyłączono jej ręcznie).

Aby dodać urządzenie, którego nie ma na liście, proszę kliknąć Edit... w tym samym menu rozwijanym i wypełnić formularz: rozdzielczość ekranu, Device Pixel Ratio, ciąg user agenta. Niestandardowy profil pojawi się na ogólnej liście.

Ręczna rozdzielczość

Jeśli nie chce się Pan/Pani wiązać z konkretnym modelem, proszę wpisać dowolne liczby w pola szerokości i wysokości. Typowy scenariusz: „jak layout wygląda na standardowym smartfonie z Androidem ze średniej półki?", wpisał Pan/Pani typową rozdzielczość i natychmiast otrzymał odpowiedź, bez wyszukiwania odpowiedniego modelu na liście.

Device Pixel Ratio

DPR określa, ile fizycznych pikseli ekranu przypada na jeden piksel CSS. We współczesnych flagowcach DPR = 3, w tabletach i budżetowych telefonach 2. W panelu emulacji Chrome pokazuje bieżącą wartość DPR dla wybranego urządzenia i pozwala zmienić ją za pomocą listy rozwijanej. Ma to bezpośredni wpływ na ostrość obrazów i ikon SVG na wyświetlaczach retina.

Obracanie ekranu, ograniczanie przepustowości sieci i dotyk

Trzy dodatkowe ustawienia, które przekształcają Device Mode z prostej „lupy" w pełnoprawne narzędzie testowe.

Obracanie ekranu

Ikona z dwiema strzałkami po okręgu zamienia szerokość i wysokość miejscami. Proszę koniecznie przełączać portret ↔ krajobraz na każdym kluczowym ekranie: nagłówek witryny, karta produktu, formularz płatności. Poziomy scroll na landingu w orientacji pionowej to krytyczny błąd, który klient zauważy szybciej niż Pan/Pani.

Ograniczanie przepustowości sieci

Lista rozwijana No throttling pozwala ograniczyć prędkość ładowania. Dostępne presety:

• Slow 3G (400 Kbps), słaby internet mobilny w metrze, za miastem lub w pomieszczeniu w piwnicy;
• Fast 3G (1.6 Mbps), typowy internet mobilny w mieście;
• Slow 4G i Fast 4G (4-25 Mbps), dobre połączenie.

Po wybraniu profilu proszę odświeżyć stronę i spojrzeć na timingi w panelu Network. Jeśli czcionki lub obrazy hero ładują się dłużej niż trzy sekundy na Fast 3G, użytkownik na wolnym internecie już poszedł do konkurencji.

Emulacja dotyku

Domyślnie włączona przy wyborze urządzenia mobilnego. Kursor zamienia się w półprzezroczyste koło, imitację dotyku palcem. Proszę sprawdzić trzy rzeczy:

• czy menu rozwijane działają po tapnięciu, a nie po najechaniu kursorem;
• czy rozmiar elementów interaktywnych jest wystarczający, zgodnie z WCAG 2.1, minimalny cel dotykowy wynosi 48×48 pikseli CSS;
• czy nie ma fałszywych wyzwoleń efektów hover, które na rzeczywistym telefonie są fizycznie nieodtwarzalne.

Geolokalizacja, media queries i czujniki

Chrome ukrył kilka przydatnych narzędzi w menu „trzy kropki" (⋮) wewnątrz panelu DevTools, w sekcji More tools.

Geolokalizacja

Zakładka Sensors (More tools → Sensors) pozwala ustawić dowolne współrzędne szerokości i długości geograficznej. Witryna korzystająca z Geolocation API otrzyma wskazany punkt zamiast rzeczywistego. Wygodne do sprawdzania cen regionalnych, automatycznego wykrywania języka interfejsu i lokalnych akcji promocyjnych.

Media queries

Panel Rendering (More tools → Rendering) pokazuje punkty przełamania CSS media queries bezpośrednio na stronie. Proszę włączyć checkbox Show media queries, nad stroną pojawi się kolorowa skala z oznaczeniami przełączania stylów. Kliknięcie punktu natychmiast ustawia viewport na odpowiednią szerokość. Niezastąpiona rzecz podczas debugowania złożonych breakpointów.

Prefers-color-scheme i prefers-reduced-motion

Tamże, w panelu Rendering, znajdują się przełączniki:

• prefers-color-scheme, wymusza włączenie jasnego lub ciemnego motywu niezależnie od ustawień systemu operacyjnego;
• prefers-reduced-motion, emuluje żądanie wyłączenia animacji, krytyczne dla testowania dostępności.

Zrzuty ekranu i nagrywanie screencastów

Device Mode potrafi robić zrzuty ekranu emulowanej strony. Trzy kropki w panelu Device Toolbar → Capture screenshot, i otrzymuje Pan/Pani PNG dokładnie w rozmiarze, który widać na ekranie. Aby uzyskać zrzut ekranu na całą wysokość strony, proszę wybrać Capture full size screenshot, przyda się do przekazania layoutu klientowi lub w raporcie o błędzie.

Jeśli statyczne zrzuty ekranu nie wystarczają, Chrome nagrywa screencast pracy z emulowaną stroną. Proszę otworzyć panel Recorder (More tools → Recorder), utworzyć nowe nagranie i wykonywać czynności, Chrome zapisze każdy krok wraz ze znacznikami czasu. Gotowe nagranie można wyeksportować jako skrypt Puppeteer i zautomatyzować ponowne testowanie po poprawkach.

Ograniczenia: kiedy nie obejdzie się bez rzeczywistego urządzenia

Emulacja w Chrome to potężne narzędzie, ale nie jest srebrną kulą. Oto, czego zasadniczo nie pokrywa:

• Renderowanie na iOS. Zgodnie z zasadami Apple App Store, wszystkie przeglądarki na iPhone i iPad muszą używać silnika WebKit, nawet Chrome i Firefox są technicznie nakładkami na Safari WebView. DevTools pokazuje renderowanie silnika Chromium (Blink), a różnice w wyświetlaniu czcionek, zaokrągleń, cieni i filtrów między Blink a WebKit mogą być znaczące.
• Czujniki sprzętowe. Żyroskop, barometr, NFC, sprzętowe przyspieszanie wideo, nic z tego nie ma w emulatorze, a odpowiednie API zwrócą null lub błąd.
• Zachowanie przy niskim poziomie naładowania. iOS i Android agresywnie usuwają karty w tle przy krytycznym poziomie baterii. Emulator tego nie odwzorowuje.
• Rzeczywista wydajność JavaScript. Procesor mobilny jest wielokrotnie wolniejszy niż desktopowy, animacje, które „latają" na służbowym laptopie, mogą przycinać na telefonie ze średniej półki cenowej. Do pomiaru proszę używać Lighthouse z ograniczaniem CPU.

Zasada jest prosta: cały cykl developmentu i kodowania layoutu proszę prowadzić w Device Mode, a finalną kontrolę każdego wydania przeprowadzać przynajmniej na jednym fizycznym urządzeniu z Androidem i jednym iPhonie.

Krótkie, ale treściwe wideo od zespołu Chrome Developers: Jecelyn Yeen pokazuje pięć sposobów emulacji mobilnego viewportu, od podstawowego przełączania po niestandardowe profile urządzeń i testowanie dotykowe.

⁉️🤔 Często zadawane pytania

Dlaczego witryna wygląda inaczej w Chrome DevTools i na rzeczywistym iPhonie?

Chrome na wszystkich platformach poza iOS używa silnika Blink. Rzeczywisty iPhone działa na WebKit, to dwa różne silniki renderujące z odmienną obsługą czcionek, wygładzania, filtrów CSS i cieni. Właśnie dlatego finalny test pod iPhone wymaga fizycznego urządzenia, emulator pokaże obraz „jak w Chrome na Macu", a nie „jak w Safari na iPhonie".

Czym różni się emulacja od symulacji w kontekście DevTools?

Emulacja odtwarza zachowanie systemu na poziomie API i protokołów: podmienia user agenta, emuluje zdarzenia dotykowe, ogranicza przepustowość sieci na poziomie przeglądarki. Symulacja to bardziej powierzchowne naśladownictwo, które nie dotyka mechanizmów niskopoziomowych. Device Mode w Chrome to właśnie emulacja, nie symulacja.

Czy można emulować konkretną wersję iOS lub Androida?

Nie. Device Mode emuluje viewport, user agenta i wprowadzanie dotykowe, ale nie system operacyjny ani wersję silnika przeglądarki. User agenta można podmienić ręcznie przez Network conditions → User agent, jednak renderowanie i tak pozostanie Blinkowe. Do testowania pod konkretną wersję Safari/iOS potrzebne jest fizyczne urządzenie lub usługa chmurowa typu BrowserStack.

Jak przetestować PWA lub Service Worker w emulatorze?

Proszę otworzyć panel Application w DevTools. W sekcji Service Workers proszę zaznaczyć Update on reload i w razie potrzeby zaznaczyć Bypass for network. Emulator obsługuje tryb offline, proszę go włączyć checkboxem Offline na karcie Network lub w panelu Service Workers. Manifest PWA sprawdza się w zakładce Manifest w tym samym miejscu, w panelu Application.

Co zrobić, jeśli Device Toolbar jest nieaktywny, a ikona jest szara?

Najczęstsza przyczyna: znajduje się Pan/Pani na stronie serwisowej Chrome (chrome://extensions, chrome://settings, nowa karta DevTools). Device Mode działa tylko na zwykłych stronach internetowych. Proszę otworzyć dowolną stronę http/https i spróbować ponownie.

Co robić, gdy emulator nie wystarcza

Device Mode w Chrome DevTools pokrywa lwią część zadań z zakresu adaptacyjnego layoutu: zmiana viewportu, ograniczanie przepustowości sieci, wprowadzanie dotykowe, geolokalizacja, media queries, zrzuty ekranu. Do codziennej pracy freelancera czy niewielkiego zespołu ten zestaw wystarcza z nawiązką.

Proszę jednak pamiętać o granicach. Renderowanie na iOS, czujniki sprzętowe, rzeczywista wydajność JS na słabym mobilnym sprzęcie, wszystko to pozostaje poza zasięgiem emulacji. Złoty standard: pisze Pan/Pani i debuguje layout w Device Mode, a przed każdym wydaniem przechodzi punkty kontrolne na fizycznym iPhonie i smartfonie z Androidem. Dwa urządzenia, piętnaście minut i pewność, że użytkownik zobaczy witrynę taką, jaką Pan/Pani zamierzył.