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

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

Пока что тестировал;

debug.phonegap.com

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

Weinre

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

Осмотр края

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

Эмулятор Chrome

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

Решение мечты

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

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

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

ДЛЯ ANDROID:

Вам нужно только включить «USB-удаленный отладчик» на вашем устройстве Android и подключить USB-кабель. Затем откройте свое приложение на устройстве. Chrome обнаружит удаленный браузер, и вы сможете увидеть консоль так же, как при локальном использовании Chrome.

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

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

Прочтите эту статью, чтобы узнать, что нужно предпринять.

Это будет работать ТОЛЬКО с устройствами под управлением Android 4.4+.

ДЛЯ iOS:

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

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

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

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

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

5. В меню Safari перейдите в раздел «Разработка» и найдите имя своего устройства.

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

УВЕДОМЛЕНИЕ

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

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

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

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

Лучше всего подключить отладчик Chrome.

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

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

Вы увидите список с запущенными приложениями. Ваше приложение должно быть там. Нажмите на «проверить».

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

Если ваше приложение работает под управлением Cordova 3.3+, а ваше устройство работает под управлением Android 4.4+, вы можете использовать Chrome Remote Webview Debugging для отладки приложения Cordova.

Для этого необходимо сначала включить на телефоне отладку по USB.

Затем откройте вкладку «Проверить устройства». В Chrome перейдите в Настройки > Дополнительные инструменты > Проверить устройства .

Если вы запускаете приложение на устройстве, когда оно подключено к компьютеру, Webview должен появиться в списке устройств. Щелкните ссылку «Проверить» в своем веб-просмотре, и должен появиться инструмент отладки для веб-просмотра.

Вот статья, полностью объясняющая, как это сделать: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Вы пробовали 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 , вы можете попробовать это бесплатно. Вам нужно будет загрузить как Visual Studio, так и Visual Studio Tools для Apache Cordova .

Насколько мне известно, единственным продуктивным инструментом для реальной отладки приложений Cordova для платформ Android от 2.2 до 4.3 является jshybugger . Вайнр - инспектор, а не отладчик. JsHybugger обрабатывает ваш код, позволяя выполнять отладку внутри Android WebView.

Просто хочу добавить, что вы можете отлаживать приложения для Android с помощью Genymotion . Это НАМНОГО быстрее стандартного эмулятора Android.

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

Я также нашел очень хорошими инструменты Visual Studio 2015 RC для кордовы с его эмулятором пульсации.

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

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

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

И есть что-то, что называется удаленной отладкой хрома, но я мало о ней знаю, вы можете посмотреть статью Раймонда Камдена: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Кордова-33-и-Remote-Debugging-для-Android

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

На Android 4.4+ с установленным 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. Добавьте следующее в свой config.xml, чтобы иметь возможность проверять с помощью Chrome Remote Webview Debugging.

Сначала убедитесь, что тег вашего виджета содержит 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 Build, установите APK, подключите телефон к USB, включите USB-отладку на своем телефоне, затем посетите chrome: // inspect.

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

Используйте Android Device Monitor

Android Device Monitor поставляется с пакетами android sdk, которые вы должны были установить ранее. В мониторе устройства вы можете видеть весь журнал устройства, исключения, все сообщения. Это полезно для отладки сбоев приложений или любых других подобных проблем. Чтобы запустить это, перейдите в папку tools / внутри SDK для Android «/ var / android-sdk-linux / tools». Затем запустите следующий

chmod +x monitor
./monitor

Если вы работаете в Windows, откройте файл monitor.exe напрямую. Под «LogCat» есть вкладка, где вы увидите все сообщения, связанные с устройством. Здесь вы увидите все сообщения, включая исключения для устройств Android, которые не отображаются на устройстве Chrome inspect. Обязательно создавайте фильтры с помощью знака «+» на вкладке logcat, чтобы вы видели сообщения только для своего приложения.

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

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

Я создаю .bat, чтобы открыть хром в режиме отладки

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

Вы можете отлаживать приложения Cordova для Android, которые установлены на вашем телефоне, удаленно с вашего компьютера через USB-кабель (вы также можете удаленно щелкнуть веб-приложение, как если бы вы просматривали веб-приложение со своего компьютера) с помощью «Удаленной отладки Chrome». Таким же образом можно отлаживать веб-приложение, просматриваемое в стандартном браузере Android или в Chrome на Android .

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

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

3. Запустите Chrome на своем компьютере, перейдите к chrome: // 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
• бегать: weinre --boundHost -all-
• открыть в браузере: http: // localhost: 8080 / client / # анонимный
• смотреть цели появляются, когда вы открываете приложение

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

На устройствах с android <= 4.0.4 необходимо добавить плагин https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt