Как я могу отладить JavaScript на Android?


281

Я работаю над проектом, в котором участвует Рафаэль. Оказывается, это не работает на Android. Это делает на iPhone.

Как, черт возьми, я отлаживаю что-то в браузере Android? Это WebKit, так что, если я знаю версию, отладка его в этой полной версии WebKit даст те же результаты?


2
Не по теме, но рассмотрите возможность проверить Snap.svg. Это римейк RaphaelJS от того же человека. Он воссоздается без поддержки старых браузеров, поэтому он быстрее, код чище и т. Д.
Lajos Meszaros

Примечание к принятому ответу: в Samsung Experience> = 9, если вы не нашли свое устройство, переключите тип USB на звуковой разъем.
BOZ

Ответы:


245

Обновление: удаленная отладка

Раньше логирование консоли было лучшим вариантом для отладки JavaScript на Android. В наши дни с помощью удаленной отладки Chrome для Android мы можем использовать все преимущества инструментов разработчика Chrome для настольных ПК на Android. Проверьте https://developers.google.com/chrome-developer-tools/docs/remote-debugging для получения дополнительной информации.


Обновление: JavaScript Console

Вы также можете перейти к пункту about: debug в строке URL, чтобы активировать меню отладки и консоль ошибок JavaScript в последних устройствах Android. Вы должны увидеть SHOW JAVASCRIPT CONSOLE в верхней части браузера.

В настоящее время в Android 4.0.3 (Ice Cream Sandwich) logcat выводит на канал браузера. Таким образом, вы можете фильтровать с помощью adb logcat browser:* *:S.


Оригинальный ответ

Вы можете использовать встроенный consoleобъект JavaScript для печати сообщений журнала, которые вы можете просмотреть adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Производит этот вывод:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Определение версии WebKit

Если вы введете javascript:alert(navigator.userAgent)в адресной строке, вы увидите версию WebKit, например,

В Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

На эмуляторе Android Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Версии WebKit, которые не являются частью выпуска Safari, имеют + после номера версии, и их номер версии обычно выше, чем последняя выпущенная версия WebKit. Так, например, 528+ - это неофициальная сборка WebKit, более новая, чем версия 525.x, поставляемая как часть Safari 3.1.2.


12
когда, когда я смогу отлаживать локально на Android, когда я не могу сделать это удаленно?
Майкл

Точно сказать не могу. Это не имело бы большого смысла на маленьком устройстве, таком как телефон, потому что экранная область была бы настолько ограничена для полного веб-инспектора. На планшетах это может иметь больше смысла, но им придется переосмыслить Web Inspector для сенсорного интерфейса, что является значительным усилием. Может быть, они работают над этим, но кто знает.
Пьер-Антуан ЛаФайет

1
Я подозреваю, что первое сокращение без каких-либо существенных изменений было бы хорошим началом, то есть позволило бы использовать значительный объем функциональности. У некоторых планшетов даже есть стилус, поэтому события мыши могут работать одинаково.
Майкл

Что это было за маленькое устройство, такое как телефон!?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Майкл Диллон

Примечание от ссылки удаленной отладки Chrome для Android: «Вы должны войти в Chrome с помощью одной из учетных записей Google. Удаленная отладка не работает в режиме инкогнито или в гостевом режиме». Вау, почему?
sdbbs

135

Пытаться:

  1. откройте страницу, которую вы хотите отладить
  2. в то время как на этой странице в адресной строке стандартного браузера Android введите:

    about:debug 

    (Обратите внимание, что ничего не происходит, но некоторые новые опции были включены.)

Работает на устройствах, которые я пробовал. Узнайте больше о браузере Android: отладка, что делают эти настройки?

Редактировать: То, что также помогает получить больше информации, такой как номер строки, это добавить этот код в ваш скрипт:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

23
Я только что попробовал, но трюк about: debug не работал на моем Nexus S с ICS 4.0.3.
Дерфлоки

6
Вы должны попытаться перейти about:debugиз той же вкладки, к которой у вас открыта текущая страница. Вместо навигации в верхней части будет отображаться «ПОКАЗАТЬ JAVASCRIPT CONSOLE». Если вы попытаетесь получить доступ about:debugиз новой вкладки, он не будет работать.
Денилсон Са Майя

10
Это только стандартный браузер, верно? Я пробую это в бета-версии Chrome для Android на KitKat без всякой удачи. (кажется, у KitKat больше нет стокового браузера)
James

7
Для этого нужен стандартный Android-браузер, и он не работает на Chrome :)
giorgio79

6
Стандартный браузер Kitkat, если его использует ваш производитель, это Chromium. about:debugдействительно переходит к тому, chrome://debugчто говорит "не может быть найден", но показывает Debugопцию в настройках. Некоторые параметры не вступают в силу, пока впоследствии не будет открыта новая вкладка.
cde

53

Http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) обеспечивает хороший способ можно использовать для доступа к содержимому вас веб - страницы.


jsconsole.com больше не поддерживает удаленную отладку с сентября 2017 года. Я создал замещающий сайт на jsconsole.net, который можно использовать бесплатно :)
Стивен Лав

21

Я использую Weinre , часть Apache Cordova .

С помощью Weinre я получаю консоль отладки Google Chrome в своем настольном браузере и могу подключить Android к этой консоли отладки и отладить HTML и CSS. Я могу выполнять команды Javascript в консоли, и они влияют на веб-страницу в браузере Android. Сообщения журнала от Android появляются в консоли отладки рабочего стола.

Однако я думаю, что невозможно просмотреть или просмотреть действительный код Javascript. Так что я совмещаю Weinre с лог-сообщениями.

(Я не знаю много о JConsole, но мне кажется, что проверка HTML и CSS невозможна с JConsole, только команды Javascript и ведение журнала (?).)


Добавлено пошаговое руководство по weinr для OS X по адресу stackoverflow.com/questions/13330221/…
leymannx

Я уже пробовал Weinre, и я не был очень доволен инструментом. Журнал не очень надежный. Некоторые ошибки не отображаются. Даже если они показаны, Weinre отображает только сообщение об ошибке без трассировки стека. Это полностью разозлило меня.
Льюис

Я уже пробовал Weinre, и я не был очень доволен инструментом. Журнал не очень надежный. Некоторые ошибки не отображаются. Даже если они показаны, Weinre отображает только сообщение об ошибке без трассировки стека. Это полностью разозлило меня.
Льюис

17

Посмотрите на jsHybugger . Это позволит вам удаленно отлаживать код js для:

  • Гибридные приложения для Android (webview, phonegap, worklight)
  • Веб-страницы, которые запускаются в браузере Android по умолчанию (не Chrome, он поддерживает расширение ADB без этого инструмента)

Как это работает (больше деталей и альтернатив на сайте проектов, это было то, что я нашел лучшим способом).

  1. Установите jsHybugger APK на ваше устройство
  2. Включите отладку по USB на вашем устройстве.
  3. Подключите устройство Android к настольному компьютеру через USB
  4. Запустите приложение на устройстве Android ('jsHybugger')
  5. Введите целевой URL и страницу в приложении. Нажмите Start Service и, наконец, откройте браузер
    • Вам будет представлен список установленных браузеров, выберите один.
    • Браузер запускается.
  6. Вернувшись на настольный компьютер, откройте Chrome to chrome: // inspect /
  7. Появится окно инспекторов с инструментами отладки Chrome, связанными со страницей на устройстве Android.
  8. отлаживать!

Опять же, с Chrome на Android используйте расширение ADB без jsHybugger. Я думаю, что это уже описано в принятом ответе на этот вопрос.


Почему это было отвергнуто? Это один из немногих инструментов, который поддерживает удаленную отладку веб-представлений внутри собственных приложений.
Алфи Хансен,

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

2
Этот инструмент на самом деле довольно хорош и решил мою проблему. Жаль, что мне пришлось копаться в поисках, вместо того чтобы увидеть этот ответ, потому что кто-то решил его похоронить. (Я закончил здесь первым) Я добавлю некоторые детали, чтобы улучшить этот ответ, посмотрим, как все это работает?
Аардварк,

jsHybugger APK больше не доступен в Google Play и не доступен для скачивания. Проект хранится здесь: github.com/dcendents/jsHybugger ; но, похоже, не включает код для генерации APK.
Адриан Херску

14

Кстати, причина, по которой RaphaelJS не работает на Android, заключается в том, что веб-набор Android (в отличие от веб-набора iPhone) в настоящее время не поддерживает SVG. Google только недавно пришла к выводу, что поддержка SVG для Android - хорошая идея, поэтому она еще не будет доступна в течение некоторого времени.


Спасибо, Людвиг, разобрался с этим вскоре после первоначального поста, но неплохо проследил.
Jvenema

Это не ответ на главный вопрос, пожалуйста, сделайте это комментарием (или отдельным вопросом) и удалите это.
Пи Джей Брюнет

12

Полная Chrome удаленная отладка родного браузера Android на Galaxy S6 на Android 5.1.1:

  1. Включить отладку по USB на телефоне (Настройки, о, быстро нажмите номер сборки, настройки разработчика, отладка по USB)
  2. Открытый "Интернет"
  3. Перейдите к «about: debug» (вы увидите ошибку)
  4. Меню БОЛЬШЕ> Настройки> Отладка> Удаленная отладка
  5. Подключите телефон к компьютеру с помощью USB-кабеля
  6. На телефоне, в интернет-браузере, откройте сайт, который вы хотите отладить
  7. Откройте Chrome на компьютере
  8. Перейдите к «chrome: // inspect»
  9. Нажмите проверить на вкладке браузера, которую вы хотите проверить

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


5

Raphael не поддерживается в браузерах Android до версии 3.0, в этом ваша проблема. У них нет поддержки SVG графики. Он имеет поддержку холста, хотя. Если вам не нужно анимировать это, вы можете визуализировать графику с помощью canvg:

http://code.google.com/p/canvg/

Вот как мы обошли эту проблему для рендеринга иконок SVG в браузере Android по умолчанию.


5

about:debug(Или chrome:\\debugоба из которых говорят , страница не может быть найден, но включить в меню Debug в настройках) , когда пытался на Chrome или Opera на Android KitKat 4.4.2 на вкладке Samsung

Если у вас есть права ROOT на вашем устройстве, вы можете просматривать сообщения консоли прямо на устройстве. Используйте приложение, такое как CatLog, для просмотра выходных данных журнала - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en. Это позволит вам просматривать все действия logcat.

В Android KitKat / 4.4.2 консоль браузера выводится на канал Chromium. Вы можете фильтровать по «Chromium», чтобы получить всю активность браузера (включая внутреннюю активность браузера), или просто фильтровать по «Консоли», чтобы видеть только журнал консоли браузера.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

5

Поместите в адресную строку chrome://about. Вы увидите ссылки на все возможные страницы разработчиков.


6
Да, но нет ничего для консоли
Нико

3

Вы можете попробовать YConsole встроенную консоль js. Это легкий и простой в использовании.

  • Поймай логи и ошибки.
  • Редактор объектов.

Как пользоваться :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Это отлично подходит для отладки JavaScript на мобильных устройствах. Спасибо
ako

3

При запуске эмулятора Android откройте браузер Google Chrome и в поле «адрес» введите:

chrome://inspect/#devices

Вы увидите список ваших удаленных целей. Найдите свою цель и нажмите на ссылку «осмотреть».


Я не знаю, почему этот ответ не получил большего признания. Это было невероятно просто, и это работает для эмулятора и физического устройства
Фрэнк

3

В Chrome есть замечательная функция, которая просто выводит фактическое содержимое Android Chrome (включая проверку и т. Д.) На экран ПК ...

  • Включите отладку по USB на устройстве, возможно, вам также необходимо подключиться один раз через, adb devicesчтобы вызвать диалог «разрешить связь с ...» на мобильном устройстве,
  • подключите устройство Android к ПК,
  • запустить Chrome на обоих, и
  • затем перейдите chrome://inspect/#devicesна ПК.
  • Здесь перечислены вкладки мобильного телефона Chrome и их можно проверить.

В сети также есть подробное руководство: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(обнаружил, что после adb logcatничего не показывал из браузера)


1

Мое решение (для стокового браузера):

  • Браузер акций
  • "consolo.log" в исходный код JS
  • Отладка USB включена
  • Android SDK
  • Из Android SDK: monitor.bat
  • Фильтр монитора как прикрепленное изображениевведите описание изображения здесь

0

Студия Android предоставляет все необходимое, чтобы увидеть console.log и другие. В logcat просто выберите «/ Web Console», и вы увидите свои журналы js ...

Если у вас возникли проблемы, вы можете добавить этот плагин: https://github.com/apache/cordova-plugin-console


0

Если вы ищете не удаленные варианты:

В более ранних и некорневых выпусках Jellybean можно использовать средство просмотра logcat, если android.permission.READL_LOGS предоставляется через adb один раз.

В Firefox есть консольное дополнение, которое читает и показывает все журналы приложений, а также Firebug Lite .


0

Вы можете попробовать "javascript-compiler-deva" из библиотеки npm, выполнив команду "npm install javascript-compiler-deva", а затем запустив compiler.is с помощью "node compiler.js".

Он создает сервер на порту 8888. Затем вы можете нажать « http: // localhost: 8888 », ввести свой код JavaScript и увидеть результат любого кода JavaScript, включая «console.log», в самом браузере телефона.

Это также размещено в " https://javascript-compiler-deva.herokuapp.com/ "


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.