На самом телефоне инструменты разработчика не открыть. Зато можно управлять браузером телефона с компьютера по кабелю, и в отличие от того же самого на iPhone - где нужен Mac - здесь подойдёт Windows, macOS или Linux. Годится любой компьютер, на котором есть Chrome.

Настройка, один раз

На телефоне. Откройте Настройки → О телефоне и нажмите семь раз на Номер сборки. Android сообщит, что режим разработчика включён. Вернитесь в Настройки → Система → Для разработчиков и включите Отладку по USB. Точный путь у разных производителей свой; поиск по слову “номер сборки” в приложении Настройки находит его быстрее, чем блуждание по меню.

Подключите его. Соедините телефон с компьютером кабелем, который передаёт данные - кабель только для зарядки чаще всего и оказывается причиной того, что ничего не появляется. Разблокируйте телефон. Он спросит, разрешить ли отладку по USB с этого компьютера; согласитесь.

На компьютере. Откройте Chrome и перейдите на chrome://inspect#devices. Ваш телефон появится там под своим именем, со списком открытых на нём вкладок. Нажмите inspect рядом с нужной.

Инструменты разработчика откроются на компьютере и будут управлять телефоном. У вас будет полный набор панелей - Элементы, Консоль, Сеть, всё - плюс живая картинка экрана, по которой можно кликать, и это по-настоящему выручает, когда человек с телефоном в руках говорит с вами по телефону же.

Без кабеля

Android 11 и новее умеют делать это по wi-fi. В разделе “Для разработчиков” включите Беспроводную отладку, выберите “Подключить устройство с помощью кода” и выполните подключение с компьютера. Оба устройства должны быть в одной сети. Это медленнее кабеля, и это разница между отладкой за рабочим столом и отладкой с дивана.

Что ещё там видно

  • Другие браузеры на Chromium, стоящие на телефоне - Samsung Internet, Edge - появляются в том же списке, как только отладка включена.
  • Firefox для Android не появляется. Его аналог - about:debugging в настольном Firefox, с тем же переключателем отладки по USB на телефоне.
  • Веб-представление внутри нативного приложения видно, только если приложение собрано с включённой отладкой веб-представлений. Для вашего собственного приложения в отладочной сборке это одна строка. Для чужого приложения из магазина этого нет, и так задумано.

Отличие от iPhone, которое стоит знать

В iOS любой браузер рисует через WebKit, поэтому ошибка, которая видна только на iPhone, часто оказывается различием движков, которое ни один настольный браузер не воспроизведёт.

С Android не так. Chrome на Android - это Blink, тот же движок, что и Chrome на вашем компьютере, поэтому большинство ошибок отрисовки действительно воспроизводится в режиме устройства на компьютере - в том самом виде телефона в инструментах разработчика. Из-за этого режим устройства здесь гораздо более удачная первая попытка, чем в случае с iOS.

Чего режим устройства всё равно не даёт - это всего остального телефона: настоящего поведения касаний и настоящих зон нажатия, реальной видимой области при открытой клавиатуре, ограничений памяти на дешёвом аппарате, различий GPU и всего, что связано с сетевыми условиями самого устройства. Так что порядок, который экономит время, такой: сначала попробуйте режим устройства, а за кабель беритесь, когда ошибка там не проявляется.

Session Replay

Бесплатное расширение для Chrome. Один клик на странице, которая ведёт себя неправильно, снимает скриншот, консоль и сетевой журнал и отдаёт вам ссылку, чтобы вставить её в тикет.

Установить расширение

Когда телефон чужой

Всё написанное выше предполагает, что телефон у вас в руках. Обычно это не так: клиент сообщил, что ваш сайт сломан на его Android, а включить режим разработчика на аппарате незнакомого человека - просьба, которую никто не станет высказывать.

О чём просить вместо этого, по порядку от самого содержательного:

  • Запись экрана. Android записывает экран из панели быстрых настроек. Она сохраняет и поведение, и тайминг, и то, куда человек нажимал.
  • Браузер и версия. Версия Chrome есть в Настройки → О браузере Chrome. “Android” - это не ответ, а вот “Chrome 152 на Android 16” - ответ.
  • Точный текст любой ошибки, сфотографированный, если так проще, чем скопировать.
  • Повторяется ли это во вкладке инкогнито, что отделяет вашу страницу от расширения, закешированного файла или устаревшего service worker.

Наше собственное ограничение, сказанное прямо на странице про телефоны: наше расширение - это расширение Chrome для настольного компьютера. Оно снимает консоль и сетевой журнал на компьютере, а не на телефоне. Для ошибки на компьютере оно убирает всю эту переписку целиком, потому что техническая половина приходит по нажатию одной кнопки. Для ошибки, которая случается только на чьём-то Android, запись экрана и номер версии остаются тем, с чем вы работаете.

Кратко

  • Телефон: Настройки → О телефоне → семь раз нажать на Номер сборки, затем Для разработчиков → Отладка по USB.
  • Компьютер: Chrome → chrome://inspect#devices → inspect.
  • Возьмите кабель с передачей данных, разблокируйте телефон и подтвердите запрос.
  • Android 11 и новее можно подключить по wi-fi.
  • Chrome на Android - тот же движок, что и Chrome на компьютере, поэтому попробуйте режим устройства, прежде чем браться за кабель.