Есть ли реальное решение для отладки приложений cordova [закрыто]


Я провел последние два дня, пытаясь выяснить, как отладить приложение HTML5, созданное с помощью Cordova 3.2 и развернутое на устройстве Android 2.3. Все статьи / сообщения, которые я видел, предоставляют хаки, а не реальные решения :( и большую часть времени ни один из них не работает для моего случая; отлаживайте стили css и код Angularjs внутри моего приложения..

пока я проверял;

debug.phonegap.com

Я ввел в скрипт затем посетил созданный URL-адрес в debug.phonegap.com но ничего не происходит, только пустая страница.

Weinre

большинство статей, которые я нашел, указывают на устаревший репозиторий Github, который содержит файл Jar.. но он не найден : (

края проверить

он работает и показывает веб-страницу, которую я просматриваю на ПК внутри мобильного телефона.. Но проблема в том, что он использует какой-то другой интегрированный браузер (или эмулятор), чем тот, который работает помощью PhoneGap приложения, поэтому результаты не являются точными.

эмулятор Chrome

то же, что и Edge inspect; он не позволяет просматривать реальный веб-комплект v530, который поставляется с Android 2.3.

решение мечта

идеальным решением было бы расширение для Google Chrome (desktop), которое позволяет переключать браузер рабочего стола на тот же, что и на платформах Android 2.3; без эмуляции нет хаков, только сам браузер с помощью web-kit v 530.

к сожалению, такого решения не существует :( или я ошибаюсь?

какие предложения?

19 104

19 ответов:

ДЛЯ ANDROID:

вам нужно только включить "USB remote debugger" в вашем устройстве android и подключить с помощью USB-кабеля. Затем откройте приложение в устройстве. Chrome обнаружит удаленный браузер, и вы можете увидеть консоль таким же образом, как и при локальном использовании Chrome.

используйте данную ссылку: chrome://inspect/#devices в браузере Chrome (вам нужно будет вставить его в панель навигации).

если ваше приложение аварийно завершает работу на устройстве вам нужно только смотрите журнал консоли в вашем браузере и смотрите, что происходит. Вы также можете добавить функциональность, изменить переменные и переопределить функции таким же образом, как мы делаем это с нашим локальным браузером.

читать в этой статье для получения дополнительной информации о шагах, которые необходимо предпринять.

это будет работать только с устройствами под управлением Android 4.4+.

для iOS:

используйте Safari для iOS, выполните следующие действия:

1.In ваше устройство iOS Перейдите в Настройки > Safari > дополнительно > веб-инспектор, чтобы включить веб-инспектор

2.Откройте Safari на устройстве iOS.

3.Подключите его к компьютеру через USB.

4.Откройте Safari на вашем компьютере.

5.In меню Safari, перейти к разработке и, искать имя вашего устройства.

6.Выберите вкладку, которую требуется отладить.

enter image description here

обратите внимание

этот ответ старый (январь 2014) с тех пор доступно много новых решений для отладки.


Я наконец-то получил это работает! используя weinre и cordova (без сборки Phonegap) и чтобы сэкономить нервы для будущих разработчиков, которые могут столкнуться с той же проблемой, я сделал YouTube tutorial;)

Если вы можете использовать устройство Android 4.4+, то вы можете использовать удаленную отладку Chrome даже на внутреннем веб-представлении приложения. Это гораздо лучший отладчик, чем Weinre, но ключ использует последнюю версию Android.

последние сборки Cordova автоматически включают этот вид отладки, если это отладочная сборка (она отключена в --release build).

лучше всего для меня, чтобы прикрепить отладчик Chrome.

для этого запустите приложение в эмуляторе или устройстве (используя $cordova emulate)

затем откройте Google Chrome и перейдите к chrome://inspect/

вы увидите список запущенных приложений. Ваше приложение должно быть там. Нажмите на кнопку "Проверить".

откроется новое окно с инструментами разработчика. Там вы можете нажать на кнопку "консоль", чтобы проверить наличие ошибок

Если ваше приложение работает под управлением Cordova 3.3+ и ваше устройство работает под управлением Android 4.4+, то вы можете использовать Удаленного Рабочего Стола Chrome WebView В Отладке для отладки приложения Cordova.

чтобы иметь возможность сделать это, вы должны сначала включить отладку USB на вашем телефоне.

затем откройте вкладку "Проверка устройств". В Chrome перейдите в настройки>

вы пробовали 'GapDebug'? Это бесплатно.

похоже, что он интегрирует версии Safari Webkit Inspector и Chrome Dev Tools, чтобы предложить интегрированный опыт отладки на OS X и Windows.

другой вариант-Visual Studio, который имеет предварительная поддержка отладки приложений Cordova:

Единая отладки. Кросс-платформенная разработка часто требуется другой инструмент для отладки каждого устройства, эмулятора или тренажер. Разные инструменты означают разные рабочие процессы и теряются производительность при каждом переключении устройств. С помощью Visual Studio, вы можно использовать одни и те же средства отладки мирового класса для всех развертываний цели, включая Windows, эмулятор Android, прикрепленный Android устройства, устройства iOS и эмуляторы, а также эмулятор Apache Ripple.

теперь, когда Microsoft выпустила Visual Studio Community edition бесплатно, вы можете попробовать это бесплатно. Вам нужно будет скачать как Visual Studio, так и Visual Studio Tools for Apache Cordova.

насколько мне известно, единственным продуктивным инструментом для реальной отладки в Cordova apps для Android платформ от 2.2 до 4.3 является jshybugger. Weinre является инспектором, а не отладчиком. Jshybugger инструменты ваш код позволяет отлаживать внутри android WebView.

просто хочу добавить, что вы можете отлаживать приложения для android с помощью Genymotion. Это намного быстрее, чем эмулятор Android на складе.

вы можете использовать Intel XDK IDE для разработки и отладки на эмуляторе или на реальном устройстве

Я также нашел Visual Studio 2015 RC tools для cordova очень хорошо, с его эмулятором ripple

Если вы используете сборку phonegap, есть возможность включить отладку.


для локальных сборок можно установить weinre с помощью npm:https://npmjs.org/package/weinre

и ссылка на документы weinre:http://people.apache.org/~pmuellr / weinre / docs/latest/


и есть что-то под названием Chrome remote debugging но я не знаю много об этом, вы можете посмотреть на статью Раймонда Камдена : http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android

документы для удаленной отладки chrome:https://developers.google.com/chrome-developer-tools/docs/remote-debugging (если я правильно понял, вам нужно android-устройство с chrome в качестве браузера по умолчанию) Может быть, самое близкое к вашей мечте решение?

на Android 4.4+ W / SDK установлен:

adb logcat chromium:D SystemWebViewClient:D \*:S

Если вы С помощью Cordova 3.3 или выше и устройство работает Android 4.4 или выше вы можете использовать удаленную отладку на Android с Chrome'. Полные инструкции здесь:

https://developer.chrome.com/devtools/docs/remote-debugging

в итоге:

  • подключите устройство к настольному компьютеру с помощью USB-кабеля
  • включить отладку USB на вашем устройстве (на моем устройстве это в разделе Настройки > Дополнительно > Параметры разработчика > Отладка USB)

или, Если вы используете Cordova 3.3+ и не имеете физического устройства с 4.4, вы можете использовать эмулятор, который использует Android 4.4+ для запуска приложения через эмулятор на вашем настольном компьютере.

  • запустите приложение Cordova на устройстве или эмуляторе
  • в Chrome на настольном компьютере введите chrome: / / inspect / #devices в адресе бар
  • ваше устройство / эмулятор будет отображаться вместе с любыми другими распознанными устройствами, подключенными к вашему компьютеру, и под вашим устройством будут отображаться сведения о Cordova ' WebView '(в основном ваше приложение Cordova), которое работает на устройстве / эмуляторе (способ работы Cordova заключается в том, что он в основном создает окно "браузер" на вашем устройстве/эмуляторе, в котором есть "WebView", который является вашим запущенным приложением HTML/JavaScript)
  • нажмите на ссылку "проверить" в разделе раздел "WebView", где вы видите свое устройство/эмулятор в списке. Это вызывает инструменты разработчика Chrome, которые теперь позволяют отлаживать приложение.
  • выберите вкладку "источники" инструментов разработчика Chrome, чтобы просмотреть JavaScript, что ваше приложение Cordova на устройстве/эмуляторе в настоящее время работает. Вы можете добавить точки останова в JavaScript, которые позволяют отлаживать ваш код.
  • кроме того, вы можете использовать вкладку "консоль" для просмотра любых ошибок (которые будут показаны красным цветом), или на в нижней части консоли вы увидите подсказку'>'. Здесь вы можете ввести любые переменные или объекты (например, объекты DOM), которые вы хотите проверить текущее значение, и значение будет отображаться.

вот решение с помощью Phonegap Build. Добавьте в свою конфигурацию следующее.xml, чтобы иметь возможность проверять с помощью отладки Chrome Remote Webview.

во-первых, убедитесь, что ваш виджет тег содержит xmlns: android="http://schemas.android.com/apk/res/android"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

затем добавьте следующий

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Он работает для меня на Nexus 5, Phonegap 3.7.0.

<preference name="phonegap-version" value="3.7.0" />

создайте приложение в сборке Phonegap, установите APK, подключите телефон к USB, включите отладку USB на вашем телефоне, затем посетите chrome: / / inspect.

источник: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Используйте Android Монитор Устройства

Android Device Monitor поставляется с пакетами android sdk, которые вы бы установили ранее. На мониторе устройства вы можете увидеть весь журнал устройства, исключения, сообщения все. Это полезно для отладки сбоев приложений или любых других подобных проблем. Чтобы выполнить это, зайдите в Tools/ папки внутри вашего Android SDK для "каталога/var/андроид-СДК-Линукс/инструментов". Затем выполните следующее

chmod +x monitor
./monitor

Если вы находитесь на Windows, непосредственно откройте монитор.файл EXE. Существует вкладка ниже "LogCat", где вы увидите все сообщения, связанные с устройством. Вы увидите все сообщения здесь, включая исключения устройств android, которые не видны chrome inspect device. Не забудьте создать фильтры, используя вкладку "+" входа в logcat, так что вы видите сообщения только для вашего приложения.

Источник: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

вы также можете отлаживать с помощью chrome свои приложения html5

создать .летучая мышь, чтобы открыть chrome в режиме отладки

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

отладка Кордова Android приложения, которые установлены на вашем телефоне удаленно с Вашего компьютера через USB-кабель (вы также можете удаленно нажать на веб-приложение, как если бы вы просматривали веб-приложение из вашего компьютера) с помощью "Chrome Remote Debugging". вы также можете отлаживать веб-приложение, просмотренное в браузере Android или Chrome на Android этот путь.

  1. включить режим разработчика на вашем Android устройстве (go в Настройки -> О телефоне -> 7 раз нажать на номер сборки).

  2. подключите компьютер к телефону через USB-кабель.

  3. обед Chrome на вашем компьютере и перейдите в chrome: / / inspect и нажмите кнопку "Inspect" рядом с удаленным устройством, которое вы хотите отладить (на вкладке "Устройства"). или щелкните правой кнопкой мыши внутри Chrome на вашем компьютере - > осмотрите - > Костюмируйте и управляйте DevTools (3 вертикальные точки-верхний правый угол инструменты разработчика) - > дополнительные инструменты - > удаленные устройства - > в разделе Устройства на левой стороне, нажмите на устройство, к которому вы подключены через USB - > нажмите на кнопку Проверить для приложения, которое вы хотите.

  4. затем нажмите "консоль", и Вы можете отлаживать JavaScript так же, как и в обычном веб-приложении с помощью инструментов разработчика Chrome.

Я любил weinre! Как его использовать:

во-первых, наденьте index.html (проверьте app.settings.debugUrl установлен до этого):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

затем:

  • установка: sudo npm install -g weinre
  • run:weinre --boundHost -all-
  • открыть в браузере: http://localhost:8080/client/#anonymous
  • смотреть цели появляются, как вы открываете приложение

на основе http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

устройства с android https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt