Как я могу отлаживать javascript на Android?

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

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

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

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


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

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

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


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

Вы можете использовать встроенный объект JavaScript console для печати сообщений журнала, которые вы можете просмотреть с помощью 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-браузере: debug, что делают эти настройки?

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

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

Я использую Вайнр , часть Apache Cordova .

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

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

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

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

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

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

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

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

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

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

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

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

Raphael не поддерживается в браузерах до 3.0 Android, вот в чем проблема. Они не поддерживают графику SVG. Тем не менее, у него есть поддержка canvasа. Если вам не нужно его анимировать, вы можете отобразить графику с помощью 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 . Вы увидите ссылки на все возможные dev-страницы.

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

  • Ловить журналы и ошибки.
  • Редактор объектов.

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

   

Согласно этой ссылке , отладку javascript можно выполнить, загрузив файл firebug.js указанный в ссылке, и загрузив загруженный файл на вашу HTML-страницу, чтобы вы могли отлаживать, не прибегая к Интернету.

Мое решение (для броузера):

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

Если вы создаете «гибридное» приложение (cordova), плагин CrossWalk использует веб-просмотр google chromes вместо стандартного интернет-просмотра, который поставляется с Android. Когда я установил плагин, он пришел с возможностью отладки.

пешеходный переход

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

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

Если вы ищете не удаленные опции:

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

В firefox есть консольный аддон, который читает и показывает все журналы приложений, а также firebug lite .

mobile-console-log позволяет отображать любой console.log в Chrome Devtools с любого устройства.

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

 chrome://inspect/#devices 

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

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

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

Он также размещен в « https://javascript-compiler-deva.herokuapp.com/ »

  • Удаленная отладка Java, как она работает технически?
  • Отладка JBoss в Eclipse
  • Прикрепить отладчик Intellij-IDEA к запущенному Java-процессу
  • Почему отлаженная программа так сильно замедляется при использовании отладки ввода метода?
  • _DEBUG vs NDEBUG
  • Индексы индексов должны быть либо натуральными натуральными, либо логическими, общим решением
  • Не удалось подключиться к серверу ASP.Net Development Server
  • Windows (). Активировать работу на каждом компьютере, кроме одного
  • Проверьте, запущено ли приложение из Visual Studio
  • Как мне работать с ClassNotLoadedException во время отладки?
  • Spring RestTemplate - как включить полную отладку / протоколирование запросов / ответов?
  • Давайте будем гением компьютера.