Как открыть 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 и перейдите по адресу: chrome://inspect/#devices
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>

Что выбрать