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

Question

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

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

Answer 1

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

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

---

Обновление: консоль JavaScript

Вы также можете перейти к 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

нотабене

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

Answer 2

Попробуйте:

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

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

   about:debug 
   

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

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

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

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

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

Answer 10

about:debug (или chrome:\\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)