Мобильное QA на localhost: как тестировать вёрстку на реальном iPhone и Android с визуальными пинами и голосовыми заметками

Каждый фронтенд-разработчик хотя бы раз попадал в ловушку десктопного инспектора: в Chrome DevTools на макбуке адаптивная вёрстка на ширине 390px выглядит безупречно, но стоит открыть сайт на физическом iPhone в Safari или Android-смартфоне, как всплывают десятки специфичных проблем:

1. Прыгающая высота 100vh и панель адреса iOS Safari: фиксированная кнопка «Оформить заказ» внизу экрана перекрывается системным тулбаром браузера или уезжает под safe-area-inset-bottom.
2. Автоматический зум при клике в <input>: если размер шрифта в поле ввода оказался 14px (меньше 16px), мобильный Safari принудительно увеличивает масштаб всей страницы и ломает горизонтальный скролл.
3. Экранная клавиатура (visualViewport): при открытии клавиатуры на реальном телефоне модальное окно съезжает вверх, и кнопка отправки становится недоступной.
4. Отсутствие HTTPS при проверке по локальному IP (192.168.x.x): попытка открыть http://192.168.1.45:3000 в домашней Wi-Fi сети приводит к тому, что браузер отключает navigator.mediaDevices (камеру/микрофон), navigator.clipboard, crypto.subtle, Web Share API и куки с флагом Secure.

Разберём, как превратить тестирование на реальных смартфонах в пятисекундную привычку с помощью HTTPS-туннелей TunnelHunt и встроенного мобильного баг-трекера Review Mode.

Шаг 1. Открываем localhost на смартфоне с полноценным HTTPS

Забудьте про выяснение локального IP через ifconfig, проброс кабелей для Safari Web Inspector и настройку самоподписанных сертификатов mkcert.

Выполните в терминале одну команду:

ssh -p 2222 -R 80:localhost:3000 tunnelhunt.ru --review

Через секунду вы получите защищённый публичный HTTPS-адрес: https://swift-falcon.tunnelhunt.ru?__review=1

Почему это сразу решает сетевые проблемы мобильного QA:

• Настоящий TLS-сертификат: мобильные браузеры считают соединение полностью доверенным (Secure Context) — работают запись звука, камера, геолокация, PWA, Telegram Mini Apps SDK и Apple Pay / Google Pay кнопки.
• Независимость от Wi-Fi: смартфон может работать через мобильную сеть 4G/5G (что заодно позволяет проверить загрузку бандла на реальной мобильной задержке сети), а ноутбук — через проводной интернет или другой Wi-Fi.

Шаг 2. Прокликиваем баги пальцем на телефоне вместо пересылки скриншотов себе в «Избранное»

Как обычно разработчик или QA-инженер тестирует мобильную вёрстку со смартфона? Он находит съехавший блок на телефоне, делает скриншот кнопками громкости, пересылает его себе в «Избранное» (Saved Messages) в Telegram, пишет подпись с телефонной клавиатуры, а потом за ноутбуком пытается вспомнить, на каком это было URL и какой компонент за это отвечает.

С включённым Review Mode (--review) вы фиксируете баги прямо на бегу:

┌─────────────────────────────────────────┐
│ 📱 Экран вашего iPhone / Android        │
│                                         │
│  [Карточка товара]                      │
│  [Цена: 4 990 ₽]   [ 📌 Пин #1 ]        │
│  [Кнопка "В корзину" вылезла за край]   │
│                                         │
│ ─────────────────────────────────────── │
│  🎙 Запись голоса (0:04):               │
│  "На узком экране кнопка не переносится │
│   на вторую строку, нужен flex-wrap"    │
│                                         │
│           [ Отправить баг ]             │
└─────────────────────────────────────────┘

Что происходит, когда вы тапаете по проблемному элементу на смартфоне:

1. Авто-определение React / Vue компонента: даже без открытого DevTools на телефоне виджет считывает из DOM-дерева точное имя компонента (например, <ProductCardActions>) и его CSS-селектор.
2. Честный мобильный скриншот: фиксируется реальный рендер мобильного вьюпорта (например, 390x844 или 412x915) вместе с пином на месте вашего касания.
3. Голосовая заметка в 1 тап: не нужно печатать длинные описания на экранной клавиатуре телефона — нажмите иконку микрофона и продиктуйте, что нужно исправить. Виджет автоматически использует нативный кодек MP4/AAC на iOS Safari и WebM/Opus на Android Chrome.

Шаг 3. Мгновенный разбор и фикс на ноутбуке

Как только вы нажали «Отправить» на смартфоне, на экране вашего рабочего монитора в открытом окне терминала появляется лог:

[17:22:10] [REVIEW #7c3e91] /product/headphones (<ProductCardActions>) "На узком экране кнопка не переносится..." by QA-iPhone

Дальше у вас есть два пути:

Путь А: Через веб-панель /reviews

Откройте app.tunnelhunt.ru/reviews на мониторе — перед вами готовый чек-лист всех найденных на телефоне багов со скриншотами, аудиоплеером, размерами экрана и путями страниц.

Путь Б: Авто-исправление через AI-агента (@tunnelhunt/mcp)

Если вы записали комментарии текстом (или воспользовались штатной голосовой диктовкой на клавиатуре iOS/Android), поручите исправление вашему агенту в Cursor или Claude Code:

«Забери открытые мобильные баги из TunnelHunt MCP и исправь адаптивную вёрстку компонентов».

Агент вызовет list_reviews, увидит точное разрешение экрана (390x844), компонент <ProductCardActions>, добавит недостающие мобильные классы (flex-wrap gap-2 sm:flex-nowrap), а благодаря HMR страница на вашем смартфоне тут же перестроится — вы сможете сразу визуально подтвердить фикс и закрыть тикет.

Сравнение способов мобильного тестирования

Попробуйте на своём проекте за 30 секунд

Запустите ваш фронтенд-сервер и откройте туннель с режимом ревью:

ssh -p 2222 -R 80:localhost:5173 tunnelhunt.ru --review

Откройте полученную ссылку на своём смартфоне и проверьте, как ваш интерфейс ведёт себя на настоящем мобильном экране.