Как открыть devtools на телефоне

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

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

1. Откройте браузер Chrome на своем телефоне.
2. Нажмите на значок меню в верхнем правом углу экрана (три точки), чтобы открыть меню настроек.
3. Выберите "DevTools" в списке опций.
4. Это откроет инструмент разработчика, где вы сможете проверить различные аспекты веб-сайта, такие как код HTML, CSS, JavaScript, загружаемые ресурсы и многое другое.

На устройствах iOS, чтобы открыть DevTools, вы можете использовать Safari и следовать этим шагам:

1. Откройте Safari на своем iPhone или iPad.
2. Перейдите на веб-сайт, который вы хотите исследовать с помощью DevTools.
3. Перейдите в настройки Safari, нажав на значок "Настройки" в виде шестеренки.
4. В меню настроек выберите "Develop" (Разработка).
5. Выберите устройство, на котором запущен Safari, чтобы увидеть список доступных инструментов разработчика.

Теперь у вас есть доступ к DevTools на вашем мобильном устройстве, что поможет вам лучше понять и оптимизировать веб-сайты на своем телефоне.

Нет там этой опции

Как открыть DevTools на телефоне

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

Android + Chrome: удалённая отладка

На телефоне

1. Откройте Настройки → О телефоне и нажмите на номер сборки 7 раз — активируются параметры разработчика.
2. Перейдите в Настройки → Для разработчиков и включите Отладка по USB.
3. Подключите телефон к компьютеру через USB-кабель.
4. На экране телефона подтвердите запрос на разрешение отладки.

На компьютере

1. Откройте Chrome и перейдите по адресу:
   1

   chrome://inspect/#devices

   Expand code
2. Найдите ваше устройство в списке — под ним будут открытые вкладки.
3. Нажмите Inspect рядом с нужной вкладкой.

Откроются полноценные DevTools: консоль, Network, Elements — всё работает применительно к странице на телефоне.

iOS + Safari: удалённая отладка

На iPhone/iPad

1. Откройте Настройки → Safari → Дополнения и включите Web Inspector.

На Mac

1. Откройте Safari на Mac.
2. В меню выберите Safari → Настройки → Дополнения и включите Показывать меню «Разработка» в строке меню.
3. Подключите iPhone к Mac через USB.
4. Откройте нужную страницу в Safari на телефоне.
5. В строке меню Mac выберите Разработка → [имя вашего устройства] → [вкладка].

Откроется Web Inspector с полным доступом к консоли и DOM.

Если нет компьютера рядом: альтернативы прямо на телефоне

Полноценных DevTools не будет, но есть браузеры с базовыми инструментами:

Eruda — подключается как скрипт к любой странице:

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

После этого на странице появится иконка, по нажатию на которую откроется мини-консоль с Elements, Network и логами.

Vconsole — аналог от WeChat, легче:

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>new VConsole();</script>

Что выбрать

В мобильных браузерах нет встроенных DevTools. Телефон подключают к компьютеру и открывают инструменты разработчика там: для Android — в Chrome через chrome://inspect, для iPhone — в Safari на Mac.

Android и Chrome

1. На телефоне включите режим разработчика: Настройки → О телефоне → семь раз нажмите на «Номер сборки».
2. В разделе «Для разработчиков» включите «Отладку по USB».
3. Подключите телефон к компьютеру кабелем и разрешите отладку во всплывающем окне на телефоне.
4. Откройте на телефоне нужную страницу в Chrome.
5. На компьютере откройте Chrome и перейдите по адресу chrome://inspect/#devices.
6. Под названием телефона появится список вкладок. Нажмите inspect рядом с нужной.

Откроются обычные DevTools: консоль, вкладки Elements и Network. Экран телефона виден в окне, по нему можно кликать мышью.

В Яндекс Браузере на компьютере тот же список открывается по адресу browser://inspect/#devices.

iPhone и Safari

1. На iPhone: Настройки → Safari → Дополнения → включите «Веб-инспектор».
2. Подключите iPhone к Mac кабелем.
3. На Mac в Safari включите меню разработчика: Safari → Настройки → Дополнения → «Показывать функции для веб-разработчиков».
4. Откройте страницу на iPhone, затем на Mac: меню «Разработка» → имя iPhone → нужная вкладка.

Для отладки iPhone нужен Mac. На Windows такого способа нет.

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

Консоль прямо на телефоне показывает библиотека Eruda. Её подключают на свою страницу:

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

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

Если телефона нет под рукой

DevTools в Chrome на компьютере умеют изображать телефон: нажмите F12, затем Ctrl + Shift + M (на macOS Cmd + Shift + M). Сверху появится панель для выбора модели и размера экрана. Это эмуляция: ошибки конкретного мобильного браузера так не поймать.

Отладку в браузере и тестирование мобильной вёрстки разбирают на профессии «Инженер по ручному тестированию» и в бесплатном курсе «Основы тестирования».