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

130

Последние два дня я потратил, пытаясь понять, как отлаживать приложение 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.

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

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

numediaweb
источник

Ответы:

139

ДЛЯ 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. Выберите вкладку, которую хотите отладить.

введите описание изображения здесь

Neotrixs
источник
3
Я могу видеть консоль и свое приложение в Chrome на моем компьютере, в то время как мой смартфон подключен через usb. Очень крутое решение.
emilie zawadzki
Он не нашел мой телефон, пока я не побежал adb start-server.
Leukipp
@Leukipp Я тоже сталкиваюсь с той же проблемой, но после этого добавляю ADT при запуске системы Windows. моя проблема решена ..
Neotrixs
2
Ответ представляет решение неправильной проблемы - вопрос не об отладке браузера, а об отладке WebView. Они немного отличаются, что видно из множества разочарованных пользователей, сбитых с толку, потому что их WebViews, в которых отображаются их приложения, не отображаются chrome://inspect.
amn
1
Android 4.4+ :( Вот почему ...
Candlejack 02
76

УВЕДОМЛЕНИЕ

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


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

numediaweb
источник
Мне не хватало правильной конфигурации IP, теперь она работает безупречно, большое спасибо!
Хуан Карлос Альписар Шинчилла
8
Weinre - это не отладчик, он позволяет только инспекции DOM, вы не можете отлаживать js и даже смотреть сообщения консоли
Богдан Март,
19
... как ссылка на видео на YouTube является приемлемым ответом?
Meekohi
2
@Meekohi, он сделал видео :)
Candyjack
10
Как и во всех ответах stackoverflow, ссылка на решение (независимо от того, сделано автором или нет) не одобряется. Храните решения здесь, а не извне, где они могут однажды исчезнуть.
DarkNeuron
56

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

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

rdchambers
источник
Выглядит великолепно - также заметил, что для включения этой функции доступен плагин для сборки телефонного разговора.
DavidC
1
Согласно вашему комментарию: он отключен в --release builds (Это неправда)
Luckyy
9
Число рейнольдса это, я нашел эту ссылку полезной. Уместно, используйте Chrome, чтобы перейти chrome://inspectи убедиться, что установлен флажок «Обнаружение USB-устройств». Это отобразит все доступные для отладки WebView на подключенных устройствах.
Sharadh
проблема с этим решением в том, что console.logоно не работает. Вам нужно пройти через то, alertsчто действительно является бременем.
Жоао Пиментел Феррейра
(it's turned off in --release builds).это уведомление спасло мне день!
Maswerdna
32

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

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

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

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

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

Хосе
источник
7
Пожалуйста, проверьте еще раз, что ваш ответ будет работать в условиях OP. Отладчик Chrome работает только с Android 4.4+.
Крис Нев,
20

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

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

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

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

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

Митч
источник
Это один из лучших и наиболее полных ответов в этом разделе комментариев, хотя он не помогает OP из-за 4.4+.
Крис Нев,
7

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

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

Zaxxo
источник
1
Это важный инструмент, особенно для пользователей Windows, желающих подключиться к iPhone с пошаговой отладкой - я очень рекомендую его.
Майк Нельсон
7

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

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

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

мистифицировать
источник
Поскольку когда-то великолепный XDK от Intel прекратил поддержку своего отладчика, мне пришлось искать новый вариант. Я нашел только Visual Studio, которая представляет собой комплексное решение (IDE, отладчик, диспетчер плагинов и т. Д.). Настройка занимает время, но это очень просто. Я использую Enterprise 2015. Он строится, но я не уверен, что он уже опубликован (я еще не дошел до этого).
Виктор Стоддард
5

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

sgimeno
источник
5

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

Виктор П
источник
1
Genymotion позволяет использовать удаленную отладку Chrome, так как она рассматривается не как эмулятор, а как реальное устройство. Камера и другие аппаратные функции тоже работают, но некоторые из них платные.
shirk3y
4

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

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

Мохамед Селим
источник
3

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


Для локальных сборок вы можете установить 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 в качестве браузера по умолчанию) Возможно, самое близкое к вашей мечте решение?

Быстрая починка
источник
Спасибо за информацию; Я предпочитаю использовать бесплатный способ кордовы;) и теперь он работает (проверьте мой ответ), спасибо! +1
numediaweb
1
проверьте мою правку, похоже, что хром не так уж далек от решения вашей мечты
QuickFix
Обратите внимание, что устройство, которое я использую, работает под управлением Android 2.3, а для удаленной отладки Chrome требуется Android 4.4 или выше. Но спасибо QuickFix; Теперь у меня все работает .. см. Мой учебник;)
numediaweb
3

На Android 4.4+ с установленным SDK:

adb logcat chromium:D SystemWebViewClient:D \*:S
Гринго Вежливый
источник
2

Если вы используете 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), для которых вы хотите проверить текущее значение, и значение будет отображено.
Крис Хэлкроу
источник
2

Вот решение, использующее 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/

brunettdan
источник
СВЯТОЙ BEJEEZUS !!! Я наконец-то могу отладить свои apk !!! Большое вам спасибо, я не знаю, почему это больше нигде нет. Дословное включение этих примечаний в ридми моего проекта.
Джош
2

Используйте 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/

Фараз Келхини
источник
Для пользователей Linux, в зависимости от метода установки SDK, его также можно найти в ~ / Android / Sdk / tools / monitor или просто попробовать ввести monitor.
Strixy
2

Вы также можете отлаживать с помощью 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
dpfauwadel
источник
1
Спасибо, но я обнаружил, что лучший подход - использовать weinre для отладки дизайна с помощью встроенного браузера webkit самого устройства!
numediaweb
1
Во-вторых, в то время как Ripple дает вам среднее представление о том, как он будет выглядеть, когда вы его выпустите, и это хорошо, иногда есть различия при сравнении эмулятора и реального устройства, в основном потому, что эмулятор работает с движком вашего веб-браузера. re работает на нем, что в некоторых ситуациях не то же самое, что и ваше устройство. Поэтому я обычно использую и то, и другое, Ripple для разработки пользовательского интерфейса, и weinre, чтобы проверить поведение, когда что-то работает не так, как ожидалось,
Хуан Карлос Альписар Чинчилла
2

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

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

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

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

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

Tadej
источник
Это работает на моем телефоне (android 6), но не работает на моем планшете (примечание 8, android 4.4)
Danielo515
Это была проблема с веб-просмотром Android. Установка плагина crosswalk позволяет мне выполнять такую ​​отладку на старых устройствах (вплоть до jelly bean)
Danielo515
1

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

brauliobo
источник
Weinre - это не отладчик, он позволяет только инспектировать DOM, вы не можете отлаживать js и даже смотреть сообщения консоли,
Богдан Март