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

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

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

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

Раньше логирование консоли было лучшим вариантом для отладки 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.

Пытаться:

1. откройте страницу, которую вы хотите отладить

2. в то время как на этой странице в адресной строке стандартного браузера Android введите:

   about:debug 

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

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

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

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

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

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

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

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

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

Посмотрите на 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. Я думаю, что это уже описано в принятом ответе на этот вопрос.

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

Полная 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, но вкладки отображаются только после перезагрузки. После перезапуска и попытки подключения мобильный браузер вылетает.

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

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

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

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)

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

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

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

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

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

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

chrome://inspect/#devices

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

В 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ничего не показывал из браузера)

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

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

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

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

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

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

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

Вы можете попробовать "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/ "

Опции локальной отладки / about: config ... больше не работают в браузерах chrome / ff / .. 2020+.

Еще один браузер с не удаленной консолью js - DevBrowser

или WebInspector ( средство выбора файлов не работает)