Elements: смотреть и править вживую
Живое дерево DOM со вычисленными стилями, наследованием и блочной моделью. Меняете значение — устройство перерисовывается мгновенно: самый быстрый путь к мобильному багу вёрстки.
Отлаживайте страницы на телефоне прямо с компьютера
Как F12 в собственном браузере — только для страниц, открытых на реальном iPhone или Android: вкладки браузера или WebView / H5 внутри приложения. Проверка элементов, ошибки консоли, точки останова, сетевые запросы, cookie и локальное хранилище.
- Запросы WebView в приложениях
- Запросы браузера на телефоне
- Экран устройства рядом
- Без пересборки
Мобильная веб-отладка без привычных обходных путей
Ниже — обычные будни отладки страницы на телефоне. Левая колонка показывает, как это делается обычно.
| Что нужно сделать | Обычный способ | С веб-инспектором |
|---|---|---|
| Вёрстка ломается только на телефоне | Угадать правку, пересобрать, выложить и снова посмотреть | Править элемент и CSS вживую и видеть, как устройство сразу перерисовывается |
| Белый экран или кнопка, которая ничего не делает | Консоли на телефоне нет, поэтому в ход идут alert и логи | Ошибки и логи ровно в том виде, в каком их выдала страница |
| Найти, какая строка JavaScript отправила запрос | Перехват показывает запрос, но никогда — того, кто его вызвал | Точки останова и пошаговое выполнение в Sources, с переменными на виду |
| Увидеть, что на самом деле лежит в cookie и localStorage | Догадываться по заголовкам запроса | Полные таблицы — имя, значение, домен, срок, Secure, HttpOnly, SameSite — и всё редактируется |
| Отладить H5-страницу внутри приложения | Она теряется в трафике, и подключиться к ней нечем | Показана под своим приложением: выбираете и отлаживаете как обычную страницу |
| Просто заставить удалённую отладку работать | Свои настройки на каждой платформе, спрятанные входы, возня с шагами | Одно окно: выбрать устройство, выбрать страницу, нажать «Отладка» |
| Смотреть трафик и состояние страницы вместе | Инструмент перехвата и отладчик — рядом, но никак не связаны | Оба в одном инструменте: расшифрованный запрос и код, который его отправил |
Настоящие инструменты разработчика, направленные на устройство
Не урезанный просмотрщик, а те же панели, что и на компьютере, — только подключённые к странице на телефоне.
Console: ошибки и живой REPL
Все ошибки и логи страницы плюс строка ввода, которая выполняет ваш JavaScript внутри этой страницы на этом устройстве. Отладка через alert() больше не нужна.
Sources: точки останова и пошаговый проход
Просматривайте загруженные скрипты и стили, ставьте точки останова, идите по стеку вызовов и смотрите переменные ровно в тот момент, когда всё пошло не так.
Network: каждый запрос в виде водопада
Статус, тип, инициатор, размер, тайминги и состояние кэша по каждому запросу, а также итоги: число запросов, переданные байты, DOMContentLoaded и полное время загрузки.
Storage: cookie, local и session
Cookie сгруппированы по доменам, со сроком, Secure, HttpOnly и SameSite, рядом — localStorage и sessionStorage: быстрее всего распутывать проблемы с состоянием входа.
Экран устройства — на вашем экране
На Android живая страница дублируется рядом с панелями, по ней можно кликать и прокручивать мышью: осмотр и управление на одном экране, без перекладывания телефона и клавиатуры.
Как это выглядит
Реальные сессии с реальным телефоном — ничего постановочного.
Что можно отлаживать
Телефоны, планшеты, эмуляторы и симуляторы, а также браузер на вашем компьютере.
| Этот компьютер | iOS | Android | |
|---|---|---|---|
| Вкладки браузера | ✓ | ✓ | ✓ |
| Страницы внутри приложений (WebView / WKWebView / H5) | ✓ | ✓ | ✓ |
| Эмулятор / симулятор | — | ✓ | ✓ |
| Просмотр и правка элементов и стилей вживую | ✓ | ✓ | ✓ |
| Консоль, точки останова и пошаговый проход | ✓ | ✓ | ✓ |
| Сетевой водопад для страницы | ✓ | ✓ | ✓ |
| Cookie / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Экран устройства рядом с панелями | — | — | ✓ |
| Не нужны ни сертификат, ни прокси | ✓ | ✓ | ✓ |
Подготовка, которую делают один раз
Три блока ниже — это варианты: сделайте тот, что соответствует вашей цели, и только один раз.
Устройство iOS
Подключите кабель и оставьте устройство разблокированным. Для Safari включите Настройки → Safari → Дополнения → Веб-инспектор; для Chrome — Настройки Chrome → Настройки контента → Веб-инспектор.
Устройство Android
Подключите кабель и включите отладку по USB в параметрах разработчика. Эмуляторы обычно находятся и без кабеля.
Браузер на этом компьютере
Запустите Chrome или Edge с --remote-debugging-port=9222, затем нажмите «Обновить» в списке страниц.
Нужна и страница внутри приложения? Ещё одно
Если нужны только вкладки браузера, это можно пропустить. Своё приложение: на Android один раз вызовите setWebContentsDebuggingEnabled(true), с iOS 16.4 задайте у WKWebView isInspectable = true. Чужое приложение или без правок кода: отметьте «Включать страницы внутри приложений» — в списке появятся страницы запущенных приложений. Для Android нужен root, на iOS работает только с приложениями с девелоперской подписью.
После этого каждый сеанс сводится к одному
Новый перехват → цель (Этот компьютер / iOS / Android) → метод «Веб-инспектор» → Обновить → выбрать страницу → Inspect. В браузере откроются полноценные инструменты разработчика; можно открыть сколько угодно сразу.
И страницы, спрятанные внутри приложений
Большинство приложений наполовину нативные, наполовину веб. Самые неприятные баги живут как раз во встроенных H5-страницах — и именно там обычные инструменты не дают ничего.
Сгруппированы по приложению
Список страниц упорядочен по приложениям, поэтому вы сразу отличите страницу оплаты внутри приложения от вкладки браузера и подключитесь именно к нужной.
Всего одна галочка
«Включить страницы внутри приложений» добавляет в список страницы уже запущенных приложений. Снимите галочку — и снова останутся только вкладки браузера.
Ничего не остаётся
Не нужно пересобирать приложение, что-то подписывать или ставить на устройство вспомогательные программы. Сессия закончилась — устройство такое же, как было.
Работает в паре с перехватом
Отлаживайте страницу здесь и в том же инструменте перехватывайте трафик этого же приложения — расшифрованный HTTPS, включая приложения с закреплением сертификата и те, что игнорируют системный прокси.
Мобильная веб-отладка: частые вопросы
Как посмотреть элемент («инспектировать») на телефоне?
Подключите телефон к компьютеру по USB, откройте Trace Eagle, выберите «Новый перехват» → iOS или Android → метод «Веб-инспектор», выберите страницу и нажмите «Отладка». На компьютере откроется полная панель Elements с живым DOM и CSS страницы на устройстве; изменение значения там мгновенно меняет страницу на телефоне.
Можно ли отладить Android WebView, не меняя приложение?
Да. WebView, которые уже разрешают отладку, сразу попадают в список. Для приложений, которые их не открывают, отметьте «Включить страницы внутри приложений» — добавятся страницы уже запущенных приложений. Для этого нужен аппарат с root, но ничего не пересобирается, не переупаковывается и не устанавливается навсегда.
Как отладить веб-страницу на iPhone или iPad?
Подключите устройство, разблокируйте его и включите Настройки → Safari → Дополнения → Веб-инспектор (или Настройки Chrome → Настройки контента → Веб-инспектор). Затем выберите устройство и страницу в Trace Eagle и нажмите «Отладка»: в браузере на компьютере откроется полный веб-инспектор с Elements, Console, Sources, Network, Storage, Layers и другими панелями.
Это то же самое, что chrome://inspect?
Он решает ту же задачу и немного больше, причём в одном окне. Встроенная в браузер страница удалённой отладки работает только с Chromium-целями на Android; здесь iOS, Android и локальный браузер собраны в одном списке, страницы сгруппированы по приложениям, встроенные H5 добавляются галочкой, а рядом находится инструмент перехвата, который расшифровывает HTTPS-трафик того же приложения.
Нужен ли джейлбрейк или root?
Для обычной отладки — нет: вкладки браузера и приложения, которые её и так разрешают, работают на стоковом устройстве. Root на Android нужен только для дополнительной опции, добавляющей страницы сторонних приложений; на iOS система сама решает, какие приложения можно включить.
Нужны ли сертификат, прокси или SDK в приложении?
Ничего из этого. Удалённая веб-отладка идёт через USB-подключение: не нужно настраивать прокси, ставить корневой сертификат на устройство или добавлять SDK либо библиотеку в приложение.
Чем это отличается от перехвата трафика?
Перехват отвечает на вопрос, что ушло в сеть: запрос, ответ, заголовки и тело — в расшифрованном виде. Веб-инспектор отвечает, что сделала страница: DOM, стили, ошибки консоли, какой скрипт отправил запрос и что уже лежало в cookie и хранилище. В Trace Eagle есть и то и другое, поэтому переключаться между ними можно, не меняя инструмент.
В каком браузере открывается окно отладки?
Сессии для Android и локального браузера открываются в Chrome, Edge или Brave (Trace Eagle запустит его сам); сессии iOS работают в любом браузере.
Работает ли это с эмуляторами и симуляторами?
Да. Android-эмуляторы обычно определяются вообще без кабеля, iOS-симуляторы на этом же компьютере — тоже. Порядок действий такой же, как с физическим устройством.
Веб-инспектор бесплатный?
Да. Как и всё остальное в Trace Eagle, он полностью бесплатен на macOS, Windows и Linux, без платных функций.