Як я можу налагоджувати JavaScript на Android?

Я працюю над проектом, який передбачає Рафаельса. Виявляється, це не працює на Android. Це робиться на iPhone.

Як, до біса, я налагоджую щось налагодження в браузері Android? Це WebKit, тож якщо я знаю версію, буде налагодження її у цій повній версії WebKit давати ті самі результати?

Оновлення: віддалена налагодження

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

Оновлення: консоль JavaScript

Ви також можете перейти до about: налагодження в рядку URL-адрес, щоб активувати меню налагодження та консоль помилок JavaScript на останніх пристроях Android. У верхній частині веб-переглядача ви побачите ПОКАЗНИК JAVASCRIPT CONSOLE.

В даний час в Android 4.0.3 (морозиво сендвіч) логката виводиться на канал браузера. Таким чином, ви можете фільтрувати за допомогою 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. Тому я поєдную Вайнре з повідомленнями журналів.

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

Погляньте на jsHybugger . Це дозволить віддалено налагодити ваш js-код для:

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

Як це працює (детальніше та альтернативи на сайті проектів, саме це я вважав найкращим способом).

1. Встановіть jsHybugger APK на свій пристрій
2. Увімкніть налагодження USB на вашому пристрої.
3. Підключіть пристрій Android до настільного комп’ютера через USB
4. Запустіть додаток на пристрої Android ("jsHybugger")
5. Введіть цільову URL-адресу та сторінку в програму. Натисніть кнопку Пуск сервіс і, нарешті, відкрийте браузер
   • Вам буде представлений список встановлених браузерів, виберіть його.
   • Запускається браузер.
6. Назад на настільному комп’ютері відкрийте Chrome для хромування: // оглянути /
7. З'явиться вікно інспекторів із хромованими інструментами налагодження, пов’язаними зі сторінкою на пристрої Android.
8. налагодження геть!

Знову ж таки, у Chrome на Android використовують розширення ADB без jsHybugger. Я думаю, що це вже було описано в прийнятій відповіді на це питання.

FYI, причина, чому RaphaelJS не працює на android, полягає в тому, що Android webkit (на відміну від iPhone webkit) наразі не підтримує SVG. Google нещодавно дійшов висновку, що підтримка SVG для андроїда є хорошою ідеєю, тому він ще не буде доступний ще деякий час.

Повна віддалена налагодження Chrome в домашньому браузері Android на Galaxy S6 на Android 5.1.1:

1. Увімкнути налагодження через USB на телефоні (Налаштування, приблизно, швидко торкніться номера збірки, налаштування розробника, налагодження USB)
2. Відкрити "Інтернет"
3. Перейдіть до "about: debug" (ви побачите помилку)
4. БІЛЬШЕ меню> Налаштування> Налагодження> Віддалена налагодження
5. Приєднайте телефон до комп'ютера за допомогою кабелю USB
6. На телефоні у веб-браузері Internet відкрийте веб-сайт, на якому ви хочете налагодити
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=uk Це дозволить переглянути всю активність .

В Android KitKat / 4.4.2 консоль браузера виводиться на канал Chromium. Ви можете фільтрувати за "Chromium", щоб отримати всю активність браузера (включати внутрішню активність браузера), або просто відфільтрувати за допомогою "Console", щоб побачити лише журнал консолі браузера.

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-компілятор-дева" з бібліотеки npm, виконавши команду "npm встановити javascript-компілятор-дева", а потім запустивши compiler.is за допомогою "node compiler.js".

Він створює сервер на порту 8888. Потім ви можете натиснути " http: // localhost: 8888 " і ввести свій код JavaScript, і побачити результат будь-якого коду JavaScript, включаючи "console.log" в самому браузері телефону.

Він також розміщений у " https://javascript-compiler-deva.herokuapp.com/ "

Локальні налагодження / about: config ... параметри, здається, більше не працюють у браузерах 2020+ chrome / ff / ...

Ще один браузер з не віддаленою консоллю js є DevBrowser

або WebInspector (інструмент для вибору файлів не працює)