Веб-инспектор

Вёрстка ломается только на телефоне, кнопка не реагирует, страница H5 остаётся белой — на компьютере достаточно нажать F12, чтобы сразу понять причину. На телефоне обычно остаётся только вставлять alert, пересобирать и смотреть заново. Веб-инспектор подключает те же самые инструменты разработчика прямо к реальной странице на устройстве: воткните кабель — и Elements, Console, Sources, Network и Storage откроются на компьютере, а устройство перерисуется сразу, как только вы измените значение.

Веб-инспектор отлаживает страницу на Android: слева живой экран устройства, справа панель Elements с вычисленными стилями

1. Как это делит работу с перехватом трафика

Нужно и то и другое, но они отвечают на разные вопросы:

	Перехват трафика	Веб-инспектор
Отвечает на	Что прошло по сети	Что сделала страница
Показывает	Запросы / ответы, заголовки, тело (расшифрованное)	Дерево DOM, вычисленные стили, ошибки консоли, стеки вызовов, cookie и хранилище
Типичный вопрос	Что вернула эта конечная точка, верны ли параметры	Какая строка JavaScript отправила этот запрос, почему не применился стиль

Перехват показывает запрос, но никогда не показывает, кто его вызвал; инспектор ставит точку останова в Sources и приводит прямо к этой строке. Оба инструмента живут в одной программе, так что переключение между ними ничего не стоит.

2. Подготовка, которую делают один раз

Три блока ниже — это варианты: сделайте тот, что соответствует вашей цели, и только один раз.

Устройство iOS

Подключите кабель, оставьте устройство разблокированным и включите переключатель веб-инспектора:

Safari: Настройки → Safari → Дополнения → Веб-инспектор
Chrome: Настройки Chrome → Настройки контента → Веб-инспектор

Этот шаг на iOS пропускают чаще всего. Без него устройство определяется, но список страниц остаётся пустым.

Устройство Android

Подключите кабель и включите отладку по USB в параметрах разработчика. Эмуляторы Android обычно находятся и без кабеля.

Браузер на этом компьютере

Запустите Chrome или Edge с --remote-debugging-port=9222, затем нажмите «Обновить» в списке страниц.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Нужна и страница внутри приложения? Ещё одно

Если нужны только вкладки браузера, этот раздел можно пропустить.

Своё приложение: включите один раз в коде.

// Android: вызвать один раз при старте Application или Activity
WebView.setWebContentsDebuggingEnabled(true);

// С iOS 16.4: сделать WKWebView доступным для проверки
webView.isInspectable = true

Чужое приложение или без правок кода: отметьте «Включать страницы внутри приложений» в диалоге, и страницы запущенных приложений попадут в список. Снимите отметку — и снова останутся только вкладки браузера.

	Требование	Примечание
Android	Устройство с root	Включает отладку WebView у запущенных приложений, без пересборки
iOS	Только приложения с девелоперской подписью	Ограничение системы — приложения из App Store включить нельзя

В любом случае приложение никогда не пересобирается, не подписывается заново, и на устройство ничего не устанавливается. По окончании сеанса устройство возвращается в прежнее состояние.

4. Начало отладки

После этого каждый сеанс сводится к одному:

Новый перехват → цель (Этот компьютер / iOS / Android) → метод «Веб-инспектор» → Обновить → выбрать страницу → Inspect

Диалог нового перехвата с выбранными Android и методом «Веб-инспектор»: после отметки «Включать страницы внутри приложений» показан список доступных для отладки страниц

Страницы показаны сгруппированными по приложению-владельцу, так что страницу внутри приложения легко отличить от вкладки браузера.
Нажатие Inspect открывает в браузере на компьютере полноценные инструменты разработчика, подключённые к этой странице на этом устройстве.
Можно открыть сколько угодно сразу — по одному окну на страницу, все работают параллельно.

5. Что видно

Те же панели, что вы каждый день используете на компьютере, только направленные на страницу на телефоне.

Панель	Что позволяет
Elements	Живое дерево DOM страницы с вычисленными стилями, наследованием и блочной моделью. Измените значение — и устройство сразу перерисуется: самый быстрый способ найти ошибку мобильной вёрстки
Console	Все ошибки и логи, которые выдала страница, плюс строка ввода, выполняющая JavaScript прямо в этой странице на этом устройстве
Sources	Просмотр скриптов и стилей, загруженных страницей, установка точек останова, прохождение стека вызовов и проверка переменных ровно в момент сбоя
Network	Каждый запрос страницы в виде водопада: статус, тип, инициатор, размер, тайминги и состояние кеша, плюс итоги по числу запросов, переданным байтам, DOMContentLoaded и полному времени загрузки
Storage	Cookie, сгруппированные по домену, со сроком действия, Secure, HttpOnly и SameSite, рядом с localStorage и sessionStorage — самый быстрый способ разобраться с проблемой состояния входа

Панель Storage веб-инспектора: таблица cookie для страницы, открытой на iPhone, со значением, доменом, сроком действия, Secure, HttpOnly и SameSite

На Android живой экран устройства дублируется рядом с панелями, и по нему можно кликать и прокручивать мышью — проверка и управление происходят на одном экране, без переключения между телефоном и клавиатурой.

6. Что поддерживается

	Этот компьютер	iOS	Android
Вкладки браузера	✓	✓	✓
Страницы внутри приложений (WebView / WKWebView / H5)	✓	✓	✓
Эмулятор / симулятор	—	✓	✓
Проверка и правка элементов и стилей в реальном времени	✓	✓	✓
Консоль, точки останова и пошаговое выполнение	✓	✓	✓
Водопад сетевых запросов страницы	✓	✓	✓
Cookie / localStorage / sessionStorage	✓	✓	✓
Экран устройства рядом с панелями	—	—	✓
Не нужен ни сертификат, ни прокси	✓	✓	✓

7. Ничего не появляется? Проверьте сначала это

Симптом	Обычно причина	Что сделать
Устройство определяется, список страниц пуст	Веб-инспектор на iOS выключен, либо экран заблокирован	Выполните раздел 2, включите, оставьте разблокированным и нажмите «Обновить»
Android не показывает страницы внутри приложений	У этого WebView никогда не была включена отладка	Своё приложение: добавьте `setWebContentsDebuggingEnabled(true)`; чужое: отметьте «Включать страницы внутри приложений» (нужен root)
Конкретное приложение iOS никогда не появляется	Ограничение системы	Сборки из App Store включить нельзя — только приложения с девелоперской подписью
Локальный браузер не показывает страницы	Запущен без порта отладки	Перезапустите Chrome / Edge с `--remote-debugging-port=9222` и нажмите «Обновить»
Inspect ничего не делает	Неподдерживаемый браузер	Для сеансов Android и локальных нужны Chrome, Edge или Brave

8. Когда его использовать

Ошибка проявляется только на телефоне: вёрстка, зоны касания, отрисовка шрифтов.
Страница H5 остаётся белой или не работает, и нужно увидеть ошибки консоли и стек вызовов.
Хотите узнать, какой скрипт отправил запрос — один перехват трафика этого не покажет.
Ищете проблему со входом или кешем и нужно увидеть, что реально лежит в cookie и хранилище.
Отлаживаете H5, встроенный в приложение — обычные инструменты здесь бессильны.

Назад к Началу работы · Смотрите также: Просмотр и декодирование · Перехват на iOS · Перехват на Android