Элемент добавления аудио на страницу

При посещении мобильного сайта пользователь хочет быстро получить доступ к необходимой информации. Длительная загрузка страницы может оттолкнуть посетителя и уменьшить вероятность его возвращения. Поэтому важно оптимизировать картинки, видео, CSS и JavaScript файлы, чтобы сайт загружался быстро даже на медленном интернете.

Полезные инструменты для оптимизации картинок и видео:

• TinyPNG — сжатие изображений без потери качества;

• Kraken.io — сервис для сжатия изображений и уменьшения их размера;

• WebP Converter — инструмент для конвертирования изображений в формат WebP, который обеспечивает более быструю загрузку;

• HandBrake — программное обеспечение для сжатия видео с высоким качеством.

Оптимизация CSS и JavaScript файлов:

• CSSnano — инструмент для сжатия CSS кода;

• UglifyJS — уменьшение размера JavaScript файлов путем удаления ненужных символов и пробелов;

• Gulp и Grunt — пакетные менеджеры, которые позволяют автоматизировать процессы оптимизации CSS и JavaScript файлов.

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

Оптимизация мобильной версии сайта для быстрой загрузки

Оптимальное время загрузки сайта — до 3 секунд, при условии, что у пользователя нет проблем с интернетом. Если сайт грузится дольше, большинство посетителей покинут сайт, даже не начав его использовать.

Поисковые системы также занижают позиции медленных сайтов — за это отвечает алгоритм Google Speed Update. Об этом Джон Мюллер говорил в своём выступлении ещё в 2018 году. Поэтому следует убедиться, что сайт загружается быстро на всех устройствах.

Как проверить скорость загрузки страниц сайта

О том, как проверить скорость загрузки страниц сайта, мы рассказываем ниже.

Что сделать, чтобы мобильный сайт загружался быстрее

Для этого нужно:

Отдельный фавикон

Фавикон — это иконка сайта, которая отображается в левой части вкладки в браузере перед названием страницы. Часто в фавиконе размещают уменьшенную копию логотипа компании: это работает на узнаваемость бренда.

Вот так фавикон выглядит в десктопной версии сайта:

В мобильных браузерах фавиконок на вкладках нет; их можно увидеть, если добавить сайт в закладки / избранное / список для чтения.

Фавиконы в мобильной версии в Избранном браузера

При оптимизации сайта для мобильных устройств нужно использовать отдельные упрощённые фавиконы. Мобильный фавикон указывается в HTML‑коде главной страницы. Он может выглядеть так:
Ссылка на мобильный фавикон

Только вертикальный скролл

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

Крупные значки

Кликабельные элементы должны быть достаточно крупными, чтобы пользователь мог легко и точно попасть пальцем на нужную кнопку или иконку.

Рекомендуемая ширина активных элементов — не менее 48 px CSS на сайте. Также важно обеспечить достаточное расстояние между элементами, чтобы исключить случайные нажатия. В идеале элементы должны располагаться таким образом, чтобы пользователи могли действовать без труда одним большим пальцем, не затрагивая соседние элементы.

Пример крупных значков на мобильном сайте

Крупный шрифт

Мелкий размер шрифта неудобен для чтения: приходится увеличивать страницу, чтобы не перенапрягать глаза. Это неудобно, особенно если на странице много текста. Оптимальный размер шрифта на мобильных сайтах — от 16 до 18 px. Высота строки для комфортного чтения — 50–75 символов с пробелами.

Чтобы текст было легче читать, нужно добавлять между строками небольшой промежуток с высотой, пропорциональной основному размеру шрифта. Обычно это 130–150% от размера текста.

Оптимизация контента для мобильных устройств: ключевые моменты

Ещё важно правильно подобрать размеры заголовков, чтобы подчеркнуть иерархию. По правилам типографики заголовок H1 должен составлять примерно 300% от размера основного шрифта, H2 — 200%. Например, для основного шрифта размером 16 px в заголовках можно применять такие параметры:

• H1 — 48 px
• H2 — 32 px

Контрастный текст

Цвет текста должен быть контрастным по отношению к фону, на котором он находится. Например, белый текст на чёрном фоне или чёрный текст на белом фоне. Резкая разница в контрасте улучшит читаемость, а глаза пользователей не будут уставать от просмотра страниц.

Подобрать оптимальный контрастный цвет текста можно с помощью сервиса WebAIM: Contrast Checker. Просто выберите цвет шрифта и фона, а инструмент определит, насколько это читаемо. Если сочетание удачное, слева появятся зелёные плашки Pass. В противном случае вы увидите красные плашки Fail.

Всплывающие окна не закрывают контент

Всплывающие окна могут быть полезны для рекламных целей, но также они могут и навредить, сделать сайт неудобным для пользования. Если всплывающее окно закрывает контент, то это может отпугнуть посетителей. Лучше убедиться, что они не закрывают контент и легко скрываются.

Хорошие примеры всплывающих окон:

Упрощённая регистрация

Регистрация с множеством обязательных полей для заполнения только утомляет пользователей. Чем меньше полей, тем лучше. Запрашивайте только самое необходимое: email, телефон, пароль. Остальные поля либо убрать, либо сделать необязательными. Добавьте возможность регистрации через соцсети, аккаунты Google и Яндекс для удобства пользователей.

Пример упрощённой формы регистрации

Использование геоданных

Если у компании несколько филиалов или точек продаж, можно использовать геоданные для улучшения пользовательского опыта на мобильном сайте. Например, сайт может запрашивать местоположение пользователя, чтобы показать ближайшие магазины в его городе. Или при оформлении заказа на сайте город будет подставляться автоматически.

Пример использования геоданных на мобильном сайте

Кроме того, можно использовать сторонние библиотеки или API для работы с геоданными, например Google Maps API или OpenStreetMap.

Упрощённая связь с компанией

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

Стоит разместить контактную информацию на главной странице сайта, а также на каждой странице, если это возможно, например в шапке страницы или в подвале. Номер телефона должен быть активным, чтобы при нажатии на него оставалось только нажать на вызов. Это удобно: не надо ничего копировать.

Настроить активный номер можно с помощью кода.

Пример активного номера телефона на мобильном сайте

Для людей, которые не любят звонить, нужны иконки‑ссылки на Telegram, WhatsApp, Viber — тоже активные, чтобы при нажатии на иконку открывался мессенджер с чатом. Также на сайт можно добавить онлайн‑чат, где пользователь может написать консультанту, не уходя с сайта.

Пример активных ссылок на мессенджеры

Едем дальше

Также у нас есть новость не про новую функцию, но про браузер Vivaldi в целом. Рады сообщить, что браузер Vivaldi стал доступен для владельцев нового автомобиля Mercedes E-класса модельного ряда 2024 года, с уникальным по своему футуристическому дизайну интерьером. Впрочем, всё закономерно: современному автомобилю — современный браузер.

На этом на сегодня всё, загрузить новую версию браузера Vivaldi 5.7 для Android можно из прежних доверенных источников.

Всем спасибо за помощь в подготовке данной версии.

Способы исследования — как пользоваться каждым

Есть несколько способов открытя DevTools в Chrome.

Заходим на главную страницу Хабра.

Инструменты разработчика есть во всех браузерах.

Мобильная версия сайта

Вы можете посмотреть, как выглядит мобильная версия страницы. Обязательно перезагрузите её после открытия, потому что при переходе между режимами размер страницы меняется, и она не всегда корректно обрабатывает этот переход.

Можно выбрать одно из предложенных устройств, или настроить свой размер экрана:

Но обратите внимание, что эта настройка позволяет настраивать только размер экрана. Нет разницы между iPhone 14Pro и 13Pro, потому что размер их экранов одинаковый:

В плане реалистичности это не эмуляторы и тем более не реальные устройства.

Вы можете искусственно снизить производительность открытой вкладки для имитации мобильных устройств среднего или низкого уровня и замедлить сеть. Эти параметры можно менять на вкладках Performance и Network:

Вёрстка

Чтобы исследовать элемент на странице, можно нажать на эту кнопку:

При наведении курсора начинают подсвечиваться соответсвующие блоки, а на вкладке Elements раскрывается путь в DOM-дереве к выделенному на экране элементу:

Это удобно, если нужно посмотреть, что будет, если поменять какие-нибудь CSS-свойства или HTML-атрибуты.

Пример 1: Подкручиваем вёрстку в главном таб-баре:

Что будет, если отступ между блоками выставить не 24px, а 8px?

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

Пример 2: Посмотрим, исчезает ли выпадающее меню из DOM-дерева, если его закрыть:

Видно, что меню закрыли, но его HTML-элементы остаются в DOM-дереве. Это значит, что после закрытия меню не демонтируется:

Если вам нужно оптимизировать производительность и скорость загрузки страницы, демонтирование с динамической подгрузкой скрытых элементов — один из первых подходов, которые стоит применить. Особенно, если скрытых элементов много.

Пример 3: Выясняем, монтируются ли скрытые элементы карусели?

Находим 3 слайда карусели:

Видно, что в DOM-дереве снова всегда есть три слайда, хотя в один момент времени отображается лишь один. Видим, что скрытые элементы — не пустышки, а настоящие слайды с заголовком и картинкой. Лишние элементы замедляют открытие сайта, поэтому, возможно, имеет смысл добавлять в DOM только слайды, которые показываются.

Console

Здесь можно посмотреть список всех сообщений, предупреждений и ошибок. Например, видим, что сайт на странице был зарегистрирован service worker:

Network

Здесь видно, какие запросы выполняет сайт. Например, открываем статью и видим запрос и ответ. Для удобства запросы можно фильтровать. Чтобы показать только запросы к API, включили фильтр Fetch XHR:

Измеряем производительность

Нажимаем Measure page load и смотрим, как будет работать сайт. Не углубляясь в детали, исследование производительности позволяет оценить множество важных метрик, таких как время до появления первого контента на странице (FCP) или время до начала интерактивности страницы (TTI).

Особенно полезным это измерение может оказаться, если вы запустите его в эмуляторе или на реальном устройстве.

Подробнее о Performance вы можете узнать из этой лекции.

Dev Tools в Safari

Чтобы открыть DevTools в Safari:

После этого выбираем «Enter Responsive Design Mode» или нажимаем ⌃+⌘+R.

Открываем инструмент и видим такую же панель с теми же элементами — Console, Network и остальные:

Напомню о нюансе: в адаптивном режиме Safari нет событий touch — единственный выход в установке эмуляторов, о которых я расскажу подробнее ниже.

Эмулятор iPhone

Чтобы запустить эмулятор iOS, даже не нужно открывать Xcode: эмулятор можно вынести отдельно, найдя его в папке Contents/Developer/Application.

Можно установить новый эмулятор и выбрать другую версию устройства и iOS.

Отладка в эмуляторе iPhone

Запускам Safari на эмуляторе iOS и открываем там Хабр. Затем в Safari на компьютере нужно выбрать наш эмулятор:

Теперь мы видим все особенности Safari на iPhone выбранной версии и можем посмотреть, как ведёт себя Touch-режим.

Пример 4. Мы видим картинку, которая открывается по клику. Находим это место в вёрстке и проверяем, демонтируется ли оно при закрытии для экономии ресурсов.

Картинку нашли, закрываем её и видим, что она остаётся:

Пример 5. Взаимодействуем со страницей через консоль.

Давайте найдем все изображения на странице. Для этого в консоли можем использовать функцию querySelectorAll:

Пример 6. Здесь же вы можете увидеть другие интересные вещи, которые можно изучить. Например, видно, что блокируются запросы к серверу Яндекс-метрики:

Первое, что приходит в голову — как и писал выше, Safari блокирует third party cookie, возможно, дело в этом. Но точную причину можно установить только после более полного исследования, которое не является моей целью для этой статьи.

Эмулятор Android

Обратите внимание, что иногда динамическая шапка может плохо сказываться на работе страницы. Из-за того, что она то появляется, то исчезает, нужно внимательнее относиться к позиционированию элементов, привязанных к низу страницы, а также к блокам, которые растягиваются на всю высоту экрана.

Отладка в эмуляторе Android — chrome remote debug

Для начала заходим в Chrome и открываем нужную вкладку.

Теперь на компьютере заходим в Chrome по ссылке chrome://inspect/#devices и видим список своих подключенных девайсов с открытыми активными вкладками в Chrome:

Теперь, если нажать inspect на нужной вкладке, откроются DevTools. При этом окно телефона в DevTools повторяет эмулятор. Подключение реального устройства по проводу работает точно так же:

Можем перейти на вкладку Performance insights и нажать Measure Load. Throttling не ставим, потому что запуск в эмуляторе уже создаёт накладные расходы для системы и поэтому веб-приложение работает медленнее, чем в обычном браузере. Страница начнёт перезагружаться на обоих экранах:

Обратите внимание, что иногда такой способ отладки в Chrome может не заработать сразу. При работе со статьёй Chrome первое время не видел мой эмулятор Android, хотя после переустановки эмулятора всё заработало.

Отладка iPhone по USB

Подключаем iPhone по проводу к Mac, открываем нужную страницу. Давайте заменим заголовок статьи.

Safari открывает инструменты разработчика для соответствующей страницы. Найдём DOM-ноду с заголовком статьи на вкладке Elements и впишем туда новое название.

При наведении курсора на DOM-ноду на телефоне подсвечивается соответствующий элемент. Вводим на компьютере нужное название и нажимаем Enter. На телефоне изменился заголовок:

Отладка Android по USB

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

Затем вы открываете Chrome — сначала на телефоне, потом на компьютере, и переходите в браузере на компьютере по ссылке chrome://inspect/#devices. Теперь вы должны видеть вкладки Chrome на телефоне:

Если нажать inspect, откроются Dev Tools. При этом экран мобильного устройства в Dev Tools и экран физического устройства синхронизированы.

Читайте официальную документация с описанием возможных проблем по этой ссылке.

Как проверить оптимизацию

Самый очевидный способ проверить сайт на мобилопригодность — открыть его на разных устройствах. Просто зайдите на сайт со своего смартфона или планшета и оцените основные характеристики. Сколько секунд загружается? Не сдвигается ли дизайн на маленьком экране? Удобно ли читать текст? Видны ли картинки? Удобна ли навигация?

Кроме этого, можно воспользоваться сервисами для тестирования.

Топвизор

Нам поможет инструмент «Анализ сайта».

Mobile‑Friendly Test (Google)

Сервис покажет, соответствует ваш сайт стандартам Google для мобильных страниц или нет.

Как проверить мобильную оптимизацию сайта:

Положительный результат проверки сайта

Неудовлетворительный результат проверки сайта

Проверка мобильных страниц (Яндекс Вебмастер)

Этот инструмент поможет обнаружить следующие проблемы:

В сервисе можно проверить как весь сайт, так и отдельные его страницы.

Проверка мобильной страницы в Яндекс Вебмастере

Как проверить весь сайт на мобилопригодность:

Выбор сайта для проверки в Вебмастере

Проверка всего сайта на мобильную оптимизацию

Еженедельная сводка по сайтам

Яндекс Справка: как Яндекс проверяет сайты на мобильную адаптивность

Проверка скорости загрузки страниц в Google PageSpeed Insights

Проверка скорости загрузки сайта в Google PageSpeed Insights

Отчёт по результатам проверки в Google PageSpeed Insights

В идеале показатели должны быть в зелёной зоне или близко к ней. Если показатели в жёлтой и в красной зоне, требуется доработка.

Code Time

Отслеживайте прямо в редакторе время написания кода, время встреч, добавив свои данные из Outlook или Google-календаря и тогда всё будет в одном календаре. Наглядно увидите границу между работой и личной жизнью — возможно, стоит уделять работе поменьше времени и отдыхать.

Способы оптимизации под мобильные

Обычно используют один из трёх вариантов: полноценная мобильная версия, адаптивная вёрстка и RESS — динамическая вёрстка.

Полноценная мобильная версия

Это отдельная от основной версия сайта. Как правило, адрес мобильной версии выглядит так: m.mysite.com.

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

Справка Google — рекомендации по индексированию с приоритетом мобильного контента

Вебмастер Справка — о сайтах для мобильных устройств

Обычно мобильная версия легче в плане загрузки страниц и содержит меньше элементов, чем полноценная версия для ПК.

Как сделать мобильную версию

❗ Процесс создания поддомена может немного отличаться в зависимости от хостинг‑провайдера. Но суть та же: нужно создать отдельный поддомен m.site.ru и разместить на нём мобильную версию сайта; обычно это делается через настройки DNS‑сервера.

С помощью JavaScript

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

Вместо example.com нужно указать свой домен.

С использованием серверного скрипта

С использованием метатега "viewport"

❗ При автоматической переадресации на мобильную версию сайта пользователю в любом случае нужно дать возможность перейти на полную версию — для этого в мобильной версии можно разместить ссылку.

Ссылка для перехода с мобильной на десктопную версию

Canonical: что это за атрибут и как прописать канонический адрес страницы

Кроме того, каждой десктопной странице должна соответствовать только одна мобильная страница, а каждой мобильной — только одна десктопная. Так поисковые роботы правильно распознают, какие страницы связаны между собой.

Можно использовать специальные атрибуты в файле Sitemap для задания тега rel="alternate" — для этого нужно указать URL мобильной страницы вместе с тегом rel="alternate". Поисковые системы поддерживают такие теги в файле sitemap.xml. Это может выглядеть таким образом:

В атрибуте media можно указать условие для перенаправления на мобильную версию. Например, only screen and (max‑width: 640px) означает, что перенаправление будет происходить только для устройств с шириной экрана не более 640 пикселей.

Адаптивная вёрстка

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

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

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

Пример адаптивной вёрстки

Как сделать адаптивную вёрстку

❗ Как планировать структуру сайта

Пример медиазапроса для устройств с максимальной шириной 768 px:

Этот тег определяет ширину области просмотра и отображение на мобильных устройствах. Благодаря этим данным браузер строит модель CSSOM.

Справка Google о viewport

Для чего используется метатег viewport и как его настроить

Чтобы активировать эмулятор, нужно кликнуть по иконке в левом верхнем углу Toggle device toolbar:

Как выглядит эмулятор устройств в браузере Chrome

Также тестировать адаптивную версию на разных устройствах можно через расширение для Chrome «Мобильный симулятор».

RESS

RESS (адаптивный дизайн + серверные компоненты, от англ. responsive design + server side components) — это технология, которая позволяет адаптировать сайт для мобильных устройств на стороне сервера. Это означает, что сервер может определить тип устройства, на котором пользователь просматривает сайт, и отправить соответствующую версию страницы.

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

RESS стал популярным методом, так как он позволяет сократить размер страницы, сжать изображения и снизить время загрузки у пользователей с медленным интернетом.

Что касается индексации RESS‑сайтов поисковиками: они воспринимают их как обычные сайты и легко индексируют, в том числе Яндекс и Google.

Пример: как выглядит RESS на смартфоне

Как сделать RESS

Справка по Node.js

Справка по PHP

Справка по WebP

Сделать это можно в эмуляторе устройств в браузере и вручную на нескольких устройствах, как и в случае с адаптивной вёрсткой.

❓ Что лучше выбрать из этих трёх вариантов

Если вам не нужно, чтобы для мобильных и десктопных пользователей был разный контент, то можно выбрать адаптивную вёрстку.

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

Если вы хотите облегчить код для мобильных устройств, то стоит рассмотреть вариант с использованием технологии RESS.

HTML CSS Support

Когда вы используете много классов и тегов, легко ошибиться и неправильно их написать. Плагин автоматически дополняет название ID или HTML-атрибута для определений, найденных в рабочей области, на которые ссылается link.

Если вы забудете — мы напомним

В новой версии Vivaldi мы добавили ещё один элемент — это диалоговое окно, напоминающее вам о возможности использовать синхронизацию для обмена данными между всеми своими устройствами.

И — нет, это напоминание не будет выскакивать на экране постоянно — оно появится через десять часов использования браузера или при третьем запуске браузера. Такая умеренная навязчивость.

Слушаем видео

По многочисленным просьбам мы добавили в новую версию браузера опцию, позволяющую продолжать слушать медиа-контент даже с выключенным экраном.

Причём, данная функция работает не только на YouTube и не только с видео — вы можете слушать видео, музыку и подкасты, размещённые на любых веб-сайтах. Включить данную опцию можно в настройках браузера — она называется «Разрешить фоновое воспроизведение звука».

Что можно отлаживать и тестировать

Каждый из способов позволяет получить полноценный доступ к браузерным инструментам разработчика DevTools. Вот некоторые из них:

Предположим, что мы открыли страницу со списком постов на Хабре: видим, что сначала едет верстка, а затем вовсе появляется белый экран. При этом, во-первых, такое поведение происходит только если мы открываем страницу на iPhone, а с Android-устройствами и на компьютере проблем нет. Во-вторых, это поведение воспроизводится лишь на отдельных страницах.

Случай выдуманный. Желаю Хабру, чтобы его пользователи никогда не видели белый экран 🙂

В этом случае с помощью отладки на эмуляторе мы можем получить доступ к консоли и исследовать логи JavaScript, а вкладка Network покажет запросы и ответы сервера в течение времени жизни нужной нам страницы.

Что важно проверить в мобильной версии

Фрагменты популярных иконочных шрифтов. Например: Font Awesome, Ionicons, Glyphicons, Octicons, значки Material Design.

Path autocomplete

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

Всё под контролем

Ещё одна полезная опция также относится к видео, но в противоположном направлении — мы добавили возможность отключать автовоспроизведение видео при открытии страницы, содержащей медиа-контент.

Найти эту опцию можно в настройках, раздел «Настройки сайтов».

Большие масштабы

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

Она находится в разделе «Специальные возможности». Используйте слайдер для выбора комфортного масштаба. Эта функция будет полезной для владельцев планшетов, устройств с большим экраном и автомобильных информационно-развлекательных систем.

Что ещё

Конечно же, есть гораздо больше инструментов, которые могут пригодиться для исследования фронтенда. Вот некоторые из них:

Cохраняйте историю из Network в файлы

Предположим, вы исследовали сеть, а теперь в качестве результата исследования хотите приложить задокументированные логи — перечень запросов со всеми сопутствующими данными: заголовки, тело запроса/ответа и т.д.

Чтобы получить HAR-файл, нужно:

Сохранение HAR-файла в Chrome, Safari и FirefoxСохранение HAR-файла в SafariСохранение HAR-файла в ChromeСохранение HAR-файла в Firefox

Мне бы перехватывать запросы, но попроще

Requestly — плагин для браузера, который позволяет делать практически то же самое, что и Charles Proxy. Он проще, но и функционал его ограничен.

Почему нельзя открыть DevTools прямо на телефоне?

На самом деле можно.

Подключив на фронтенде библиотеку Eruda, вы получаете полупрозрачную кнопочку. Клик на эту кнопку открывает практически полноценные инструменты разработчика. Использовать Eruda удобно, если вы отлаживаете, например, WebView. В частности, платформа VK Apps поставляет Eruda как инструмент по умолчанию для отладки мини-приложений для собственной платформы приложений.