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

165

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

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

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

google-chrome-devtools mobile-chrome tim_xyz
источник

Ответы:

134

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

  1. Подключите ваше устройство Android
  2. Выберите ваше устройство: Дополнительные инструменты> Проверка устройств *из инструментов разработчика на ПК / Mac.
  3. Авторизуйтесь на вашем мобильном телефоне.
  4. Удачной отладки !!

* Теперь это «Удаленные устройства».

PseudoAj
источник
2
Я думаю, что подробное объяснение предоставлено в ссылке на документацию
PseudoAj
59
Возможно ли это сделать без внешнего компьютера?
Эрик Рид,
59
Вопрос просит открыть консоль инструментов разработчика в Chrome на телефоне Android? Ваша душа требует отдельной машины для отладки. В вашем ответе отладка не на самом телефоне
Fennekin
5
Нет другого способа узнать о @fennekin. Пожалуйста, не стесняйтесь обновлять, если вы думаете, что есть лучший способ,
PseudoAj
5
По состоянию на январь 2019 года я не смог найти устройства Inspect в разделе «Дополнительные инструменты», я наконец-то нашел его в chrome: // inspect, и вам нужно разрешить отладку по USB с вашего телефона
Абхинав Сингх,
53

Если у вас нет ПК под рукой, вы можете использовать Eruda, который является devtools для мобильных браузеров. Https://github.com/liriliri/eruda.
Он предоставляется как встраиваемый javascript, а также букмарклет (вставка букмарклета в хром удаляет javascript: префикс, поэтому вы должны ввести его самостоятельно)

trogper
источник
1
Очень хороший компаньон для таких инструментов, как Termux, которые делают разработку на одиночных мобильных устройствах реальной! Я уже интегрированы eruda-webpack-pluginв один проект: npm i eruba-webpack-plugin --save-optional.
Винтпроект
Самый простой способ получить то, что находится в консоли
makwana.a
Отличное решение. Это доступно в CDN.
нетишикс
Это не похоже на работу для меня. Вставка его в адресную строку (а затем чтение 'javascript:'), похоже, ничего не делает.
BT
@BT некоторые веб-сайты ограничивают загрузку сценариев из указанных разрешенных доменов. Попробуйте на другом сайте.
трогпер
10

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

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

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

Джон Балвин Ариас
источник
К вашему сведению: вы можете столкнуться с ситуацией, когда консоль НЕ будет отображаться. Основываясь на разговоре в конце официальной домашней страницы , вы можете попытаться сделать mobileConsole.init()это явно . Этот трюк помогает в моем случае. YMMV.
RayLuo
1
эта ссылка все еще работает, просто требуется много времени для загрузки. Тем не менее я могу подвести итог, что эти разговоры между мной и владельцем библиотеки закончились тем, что он добавил следующую информацию в раздел «Примечания» на своей главной странице: «Если mobileConsole не запускается (обнаружение мобильного устройства не удается), вы можете отменить автозапуск, установив overrideAutorun в true или добавьте следующий скрипт на свою страницу: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo
7

Пожалуйста, сделайте себе одолжение и просто нажмите на легкую кнопку:

загрузите Web Inspector (Open Source) из магазина Play.

A CAVEAT: ATTOW, консольный вывод не принимает остальные параметры! Т.е. если у вас есть что-то вроде этого:

console.log('one', 'two', 'three');

ты увидишь только

один

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

console.log([ 'one', 'two', 'three' ].join(' '));

чтобы увидеть ожидаемый результат.

Но приложение с открытым исходным кодом ! Патч может быть неизбежным ! Патчером может быть даже ты!

Сэнсэй Джеймс
источник
3

Kiwi Browser является мобильным Chromium и позволяет устанавливать расширения . Установите Kiwi, а затем установите расширение «Mini JS console» Chrome (просто найдите в Google и установите с веб-сайта расширений Chrome, uBlock также работает;). Он станет доступен в меню киви внизу и покажет вывод консоли для текущей страницы.

Pawel
источник
-1

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

https://gear4.app

Angolao
источник
5
Приложение предназначено только для iPhone. Вопрос задан Android.
Пит