Тестування верстки в DevTools — це лише перший крок. Реальні пристрої поводяться інакше: iOS Safari має власну логіку обробки viewport, Android Chrome по-різному рендерить шрифти, а деякі баги з'являються лише при певній орієнтації екрана.
Інструменти та методики
Розглядаємо Chrome DevTools у деталях: device emulation, network throttling, CSS overview. Окремо — BrowserStack для тестування на реальних пристроях і Responsively App для одночасного перегляду кількох розмірів екрана. Також розбираємо автоматизоване тестування через Playwright із перевіркою знімків екрана.
Типові проблеми, які важко помітити
Горизонтальний скрол через overflow на вкладених елементах, некоректна висота на iOS через 100vh, зміщення елементів при появі клавіатури, проблеми з touch-областями на дрібних інтерактивних елементах. Кожна з цих проблем має конкретне рішення — не обхідний шлях, а правильний підхід.
Структура практичної частини
Учасники отримують тестовий проєкт із навмисно закладеними помилками. Завдання — знайти і виправити їх за допомогою інструментів, розглянутих на занятті. Розбір рішень — у прямому ефірі.