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

Ответ 1

УВЕДОМЛЕНИЕ

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

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

Ответ 2

ДЛЯ 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. В меню Safaris откройте "Разработка" и найдите имя вашего устройства.

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

Ответ 3

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

Недавняя сборка Cordova автоматически активирует такую ​​отладку до тех пор, пока сборка отладки (она отключена в -release builds).

Ответ 4

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

Чтобы сделать это, запустите приложение в эмуляторе или устройстве (используя эмуляцию $cordova)

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

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

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

Ответ 5

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

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

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

Если вы запустите приложение на своем устройстве, когда оно подключено к вашему компьютеру, веб-просмотр должен появиться в списке устройств. Нажмите ссылку "Inspect" вашего Webview, и появится инструмент Debug для вашего Webview.

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

Ответ 6

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

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

Ответ 7

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

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

Теперь, когда Microsoft выпустила версию Visual Studio Community бесплатно, вы можете попробовать это бесплатно. Вам нужно будет загрузить как Visual Studio, так и Инструменты Visual Studio для Apache Cordova.

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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

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

И есть что-то, называемое удаленной отладкой chrome, но я мало что знаю об этом, вы можете взглянуть на статью Раймонда Камдена: 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 с хром в качестве браузера по умолчанию) Может быть, ближе всего к решению вашей мечты?

Ответ 12

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

Я создаю .bat для открытия chrome в режиме отладки

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

Вот решение, использующее Phonegap Build. Добавьте следующее в свой файл config.xml, чтобы проверить его с помощью Отладки удаленного веб-браузера Chrome.

Сначала убедитесь, что ваш тег виджета содержит 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/

Ответ 16

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

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

chmod +x monitor
./monitor

Если вы находитесь в окнах, откройте файл monitor.exe. На вкладке "LogCat" есть вкладка, в которой вы увидите все сообщения, связанные с устройством. Здесь вы увидите все сообщения, в том числе исключения для устройства Android, которые не видны. Не забудьте создать фильтры, используя знак "+" на вкладке logcat, чтобы вы видели сообщения только для своего приложения.

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

Ответ 17

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

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

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

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

• Затем нажмите "Консоль", и вы можете отлаживать JavaScript так же, как и в обычном веб-приложении с инструментами разработчика Chrome.

Ответ 18

Я любил 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>

Тогда:

• install: 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/

Ответ 19

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