Ви верстаєте адаптивний макет, перевіряєте на десктопі, усе тримається ідеально. Відкриваєте на смартфоні, верстка попливла, шрифт став завбільшки з сірникову голівку, а кнопка «Сплатити» заповзла за край екрана.

Купувати парк реальних пристроїв під кожен екран можуть собі дозволити продуктові гіганти з бюджетом на QA-лабораторію. А фрилансеру, стартапу з трьох розробників чи соло-верстальнику що робити? Відповідь, вбудований емулятор Chrome DevTools. Безплатний, запускається однією комбінацією клавіш і закриває переважну більшість повсякденних задач із перевірки адаптивності. Без встановлення додаткових програм, без віртуалок, без хмарних ферм.

Нижче, покроковий посібник із Device Mode: від увімкнення до тонкого налаштування тротлінгу мережі та емуляції датчиків. Усе, що потрібно, щоб перевірити сайт на смартфонах і планшетах, не відриваючись від робочого ноутбука.

💡 Швидкий огляд:

• Відкрийте DevTools (F12 або Ctrl+Shift+I) і ввімкніть Device Toolbar (Ctrl+Shift+M), сторінка перемкнеться в режим емуляції мобільного viewport.
• Виберіть конкретну модель зі спадного списку (iPhone, Pixel, Galaxy) або задайте довільну роздільну здатність у пікселях, Chrome автоматично підставить потрібний user agent.
• Налаштуйте тротлінг мережі (Slow 3G / Fast 3G) і ввімкніть емуляцію сенсорного введення, побачите, як сайт завантажується та взаємодіє з користувачем на реальному мобільному інтернеті.
• Пам’ятайте про обмеження: емулятор не відтворює апаратний GPU конкретного пристрою, рендеринг шрифтів iOS та особливості Safari WebKit, для фінального тесту реальний телефон усе ще необхідний.

Що таке Device Mode і коли його достатньо

Device Mode — це набір інструментів усередині Chrome DevTools, який емулює перегляд сторінки на мобільному пристрої. Він робить три речі одночасно:

• Емулює viewport, стискає область перегляду до фізичних розмірів екрана вибраного девайса. Ви бачите сайт так, як його побачить користувач iPhone 16 Pro Max або Samsung Galaxy S25.
• Підміняє user agent, сервер отримує рядок, характерний для мобільного браузера. Критично для сайтів із динамічним serving, які віддають різну верстку десктопу й мобільним.
• Вмикає сенсорну емуляцію, курсор миші перетворюється на імітацію пальця, з’являється підтримка touch-подій, жестів і мультитач.

Одразу окреслимо межі. Device Mode НЕ емулює: рушій рендерингу Safari (WebKit), апаратне прискорення GPU конкретної моделі, поведінку батареї та фонових процесів операційної системи, особливості стільникових мереж різних операторів. Для фінального приймального тесту перед релізом фізичний телефон усе одно знадобиться. Але для щоденної верстки та налагодження інструмент перекриває потреби із запасом.

Як відкрити Device Mode: три способи

Chrome дає кілька шляхів до панелі емуляції. Виберіть той, який швидший у вашому робочому процесі.

Спосіб 1. Гарячі клавіші, найшвидший

Перебуваючи в Chrome, натисніть:

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

Якщо DevTools ще не відкрито, відкриється автоматично разом із панеллю емуляції. Повторне натискання вимикає Device Mode і повертає звичайний вигляд сторінки.

Спосіб 2. Кнопка в DevTools

Відкрийте DevTools (F12 або Ctrl+Shift+I). У лівому верхньому куті панелі, поруч із вкладкою Elements, знаходиться іконка телефона й планшета, Toggle device toolbar. Клацніть по ній.

Спосіб 3. Через головне меню Chrome

Три крапки в правому верхньому куті браузера → More Tools → Developer Tools. Далі, кнопка Device Toolbar, як у способі 2. Шлях довший, але рятує, якщо гарячі клавіші вилетіли з голови посеред нічного деплою.

Вибір пристрою та налаштування емуляції

Після ввімкнення Device Toolbar сторінка перезавантажиться, а над нею з’явиться панель керування емуляцією. Розберемо кожен елемент.

Спадний список пристроїв

Центральний елемент, спадний список із попередньо встановленими профілями. Chrome постачає півтора десятка пресетів: від iPhone SE (для перевірки компактних екранів) до iPhone 16 Pro Max, від Pixel 9 до Galaxy S25.

Виберіть пристрій, і Chrome за один крок:

• установить ширину й висоту viewport;
• підставить відповідний user agent;
• увімкне сенсорну емуляцію (якщо не вимкнено вручну).

Щоб додати пристрій, якого немає в списку, натисніть Edit... у тому самому спадному меню та заповніть форму: роздільну здатність екрана, Device Pixel Ratio, рядок user agent. Кастомний профіль з’явиться в загальному списку.

Ручна роздільна здатність

Не хочете прив’язуватися до конкретної моделі, вбийте довільні цифри в поля ширини та висоти. Типовий сценарій: «як макет виглядає на стандартному Android-смартфоні середнього сегмента?», вбили типову роздільну здатність і миттєво отримали відповідь, не вишукуючи потрібну модель у списку.

Device Pixel Ratio

DPR визначає, скільки фізичних пікселів екрана припадає на один CSS-піксель. У сучасних флагманів DPR = 3, у планшетів і бюджетних телефонів, 2. У панелі емуляції Chrome показує поточне значення DPR для вибраного пристрою та дозволяє змінити його через спадний список. Це безпосередньо впливає на різкість зображень і SVG-іконок на retina-дисплеях.

Поворот екрана, тротлінг мережі та сенсор

Три додаткові налаштування, що перетворюють Device Mode із простої «лупи» на повноцінний інструмент тестування.

Поворот екрана

Іконка з двома стрілками по колу міняє ширину й висоту місцями. Обов’язково перемикайте портрет ↔ ландшафт на кожному ключовому екрані: шапка сайту, картка товару, форма оплати. Горизонтальний скрол на лендингу в портретній орієнтації, критична помилка, яку замовник помітить швидше за вас.

Тротлінг мережі

Спадний список No throttling дозволяє обмежити швидкість завантаження. Доступні пресети:

• Slow 3G (400 Kbps), поганий мобільний інтернет у метро, за містом або в підвальному приміщенні;
• Fast 3G (1.6 Mbps), типовий мобільний інтернет у місті;
• Slow 4G і Fast 4G (4-25 Mbps), хороший зв’язок.

Після вибору профілю оновіть сторінку й дивіться на таймінги в панелі Network. Якщо шрифти або hero-зображення завантажуються довше трьох секунд на Fast 3G, користувач на повільному інтернеті вже пішов до конкурента.

Сенсорна емуляція

Типово ввімкнена під час вибору мобільного пристрою. Курсор перетворюється на напівпрозоре коло, імітацію дотику пальцем. Перевірте три речі:

• чи працюють спадні меню за тапом, а не за hover;
• чи достатній розмір інтерактивних елементів, згідно з WCAG 2.1, мінімальна touch-ціль становить 48×48 CSS-пікселів;
• чи немає хибних спрацьовувань hover-ефектів, які на реальному телефоні фізично не відтворювані.

Геолокація, медіа-запити та датчики

Chrome сховав кілька корисних інструментів у меню «три крапки» (⋮) всередині панелі DevTools, розділ More tools.

Геолокація

Вкладка Sensors (More tools → Sensors) дозволяє задати довільні координати широти й довготи. Сайт, що використовує Geolocation API, отримає вказану точку замість реальної. Зручно для перевірки регіональних цін, автоматичного визначення мови інтерфейсу та локальних промо-акцій.

Медіа-запити

Панель Rendering (More tools → Rendering) показує точки перелому CSS media queries просто поверх сторінки. Увімкніть прапорець Show media queries, над сторінкою з’явиться кольорова шкала з позначками перемикання стилів. Клік по точці миттєво виставляє viewport у відповідну ширину. Незамінна річ під час налагодження complex-брейкпоінтів.

Prefers-color-scheme і prefers-reduced-motion

Там само, у панелі Rendering, знаходяться перемикачі:

• prefers-color-scheme, примусово вмикає світлу або темну тему незалежно від налаштувань ОС;
• prefers-reduced-motion, емулює запит на вимкнення анімації, критично для accessibility-тестування.

Знімки екрана та запис скринкастів

Device Mode вміє робити скриншоти емульованої сторінки. Три крапки в панелі Device Toolbar → Capture screenshot, і ви отримуєте PNG рівно того розміру, який бачите на екрані. Для скриншота на всю висоту сторінки виберіть Capture full size screenshot, знадобиться для передачі макета замовнику або в баг-репорт.

Якщо статичних скриншотів недостатньо, Chrome записує скринкаст роботи з емульованою сторінкою. Відкрийте панель Recorder (More tools → Recorder), створіть новий запис і виконуйте дії, Chrome запише кожен крок разом із часовими мітками. Готовий запис можна експортувати як Puppeteer-скрипт і автоматизувати повторне тестування після правок.

Обмеження: коли без реального пристрою не обійтися

Емуляція в Chrome, потужний інструмент, але не срібна куля. Ось що вона принципово не покриває:

• Рендеринг на iOS. Згідно з правилами Apple App Store, усі браузери на iPhone та iPad зобов’язані використовувати рушій WebKit, навіть Chrome і Firefox технічно є обгортками над Safari WebView. DevTools показує рендеринг рушія Chromium (Blink), а відмінності у відображенні шрифтів, заокруглень, тіней і фільтрів між Blink і WebKit можуть бути суттєвими.
• Апаратні датчики. Гіроскоп, барометр, NFC, апаратне прискорення відео, нічого цього в емуляторі немає, і відповідні API повернуть null або помилку.
• Поведінка за низького заряду. iOS та Android агресивно вивантажують фонові вкладки за критичного рівня батареї. Емулятор такого не відтворює.
• Реальна продуктивність JavaScript. Мобільний процесор багатократно повільніший за десктопний, анімації, що «літають» на робочому ноутбуці, можуть фризити на телефоні середньої цінової категорії. Для заміру використовуйте Lighthouse із тротлінгом CPU.

Правило просте: увесь цикл розробки та верстки ведіть у Device Mode, а фінальну перевірку кожного релізу проводьте хоча б на одному фізичному Android-пристрої та одному iPhone.

Коротке, але насичене відео від команди Chrome Developers: Джеселін Йин показує п’ять способів емуляції мобільного viewport, від базового перемикання до кастомних профілів пристроїв і сенсорного тестування.

⁉️🤔 Часті запитання

Чому сайт виглядає по-різному в Chrome DevTools і на реальному iPhone?

Chrome на всіх платформах, крім iOS, використовує рушій Blink. Реальний iPhone працює на WebKit — це два різні рушії рендерингу з відмінною обробкою шрифтів, згладжування, CSS-фільтрів і тіней. Саме тому фінальний тест під iPhone потребує фізичного пристрою, емулятор покаже картинку «як у Chrome на Mac», а не «як у Safari на iPhone».

Чим емуляція відрізняється від симуляції в контексті DevTools?

Емуляція відтворює поведінку системи на рівні API та протоколів: підміняє user agent, емулює touch-події, обмежує пропускну здатність мережі на рівні браузера. Симуляція, більш поверхневе наслідування, що не зачіпає низькорівневі механізми. Device Mode у Chrome — це саме емуляція, не симуляція.

Чи можна емулювати конкретну версію iOS або Android?

Ні. Device Mode емулює viewport, user agent і сенсорне введення, але не операційну систему й не версію браузерного рушія. User agent можна підмінити вручну через Network conditions → User agent, однак рендеринг усе одно залишиться Blink-івським. Для тестування під конкретну версію Safari/iOS потрібен або фізичний девайс, або хмарний сервіс на кшталт BrowserStack.

Як протестувати PWA або Service Worker в емуляторі?

Відкрийте панель Application у DevTools. У розділі Service Workers поставте прапорець Update on reload і позначте Bypass for network за потреби. Емулятор підтримує офлайн-режим, увімкніть його галочкою Offline на вкладці Network або в панелі Service Workers. Маніфест PWA перевіряється у вкладці Manifest там само, у панелі Application.

Що робити, якщо Device Toolbar не активний, іконка сіра?

Найчастіша причина, ви перебуваєте на службовій сторінці Chrome (chrome://extensions, chrome://settings, нова вкладка DevTools). Device Mode працює лише на звичайних веб-сторінках. Відкрийте будь-яку http/https-сторінку та спробуйте знову.

Що робити, коли емулятора недостатньо

Device Mode у Chrome DevTools закриває левову частку задач з адаптивної верстки: зміна viewport, тротлінг мережі, сенсорне введення, геолокація, media-запити, скриншоти. Для повсякденної роботи фрилансера чи невеликої команди цього набору вистачає із запасом.

Але пам’ятайте про межі. Рендеринг на iOS, апаратні датчики, реальна продуктивність JS на слабкому мобільному залізі, усе це залишається за межами емуляції. Золотий стандарт: пишете та налагоджуєте верстку в Device Mode, а перед кожним релізом проходите контрольні точки на фізичному iPhone та Android-смартфоні. Два пристрої, п’ятнадцять хвилин, і впевненість, що користувач побачить сайт таким, яким ви його задумали.