Как открыть консоль браузера на телефоне

Можно ли открыть консоль инструментов разработчика в Chrome на телефоне Android?

приложение AngularJS отлично работает на рабочем столе, но не рендеринг должным образом на мобильном телефоне (отображается фактический код). Это на телефоне Android.

Я хотел бы увидеть, какие ошибки отображаются в консоли.

можно ли открыть консоль JS в приложении chrome на мобильном телефоне (например, на рабочем столе)?

3 ответов

вы можете сделать это с помощью удаленной отладки, вот это официальная документация. Основной процесс:

1. подключите устройство android
2. выберите устройство: дополнительные инструменты > проверить устройства из dev tools на ПК / mac.
3. авторизация на мобильном телефоне.
4. счастливой отладки!!

код доступен из Github; вы можете скачать его и вставить это в файл javascipt и добавьте его в свой HTML

Источник

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

Верстаем на мобильном: отладка сайтов с помощью телефона

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

Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.

Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». У меня режим разработчика уже включён, поэтому отображается соответствующее сообщение. Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»

Ставим галочку «Discover USB devices».

Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».

Как открыть DevTools в браузере на android?

Видим слева своё устройство и его статус. Кликаем по нему.

Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.

Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.

Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».

Подключаем телефон, видим его справа сверху. Кликаем по нему.

Разрешаем доступ на мобильном.

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

Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

Источник

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

Простыми словами – у вас есть сайт, и вы визуально (на своей стороне) можете изменить цвет, например, кнопки или размер шрифта без изменений самого сайта. Помимо этого, вы можете исследовать тот или иной элемент на странице, просмотреть его верстку и ознакомиться с его стилями.

С ПК в принципе все понятно, ведь именно на них идет основная часть всех разработок. Но есть умельцы, кто программирует или создает сайты на смартфонах/планшетах. Казалось бы неким безумием (сами понимаете удобство и возможности смартфонов), но вполне имеет место быть. Признаюсь, я сам на начальном этапе своего обучения пробовал создавать простенькие игры на телефоне с помощью Basic, но сейчас не об этом.

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

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

Многофункциональный браузер, содержащий в себе необходимые инструменты для веб-разработчика.

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript. с возможностью его редактирования.
3. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

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

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript. (HTML) с функцией отслеживания и редактирования стилей элементов.
3. Отображение дерева DOM.
4. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
5. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Источник

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

Попытки найти как вызывать консоль ошибок в chrome / firefox / т.д. на Android ничему не привели.

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

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

На телефоне заходим в Settings (настройки)

Если Android 8 или более новый, то нужно еще зайти в System (Система)

В самом низу списка About phone (О телефоне)

Нужно 7 раз нажать на Build number (Версия сборки)

После 7го нажатия появится сообщения, что «вы разработчик»

Если Android 8 или более новый, то нужно вернутся на уровень выше.

Дальше переходим в developer options (Настройки разработчика), включаем их, находим в списке отладку по USB и тоже включаем ее.

Теперь на десктопном компьютере открываем Chrome, а в нем Инструменты отладки (F12)

Дальше загодив в настройки, More tools затем Remote devices

Теперь подключаем телефон проводом к компьютеру.

Блок Remote devices обновиться и в нем появится телефон.

На телефоне нужно открыть Chrome и в новой вкладке сайт

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

Источник

JavaScript консоль на телефоне

Как можно открыть JavaScript консоль в браузере на телефоне?

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

я просто написал игру браузерную (крестики-нолики), и хотелось-бы, если когда-то от скуки на уроке станет скучно, с другом поиграем (на телефоне же удобнее, чем на бумаге, особенно, если сам это написал 🙂 ). Так вот, если друг начнет выигрывать, то открою консоль, пропишу секретную команду и там что-то интересное произойдёт. Поэтому вот и спрашиваю) Думаю, будет удобно, 6,7 дюймов телефон.

Источник