Чи є реальне рішення для налагодження програм для шнурів [закрито]

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

Поки що я тестував;

debug.phonegap.com

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

Вайнре

Більшість статей, які я знайшов, вказують на застаріле сховище Github, яке містить файл Jar .. але воно не знайдено :(

Край огляньте

Він працює і показує веб-сторінку, яку я переглядаю на ПК всередині мобільного телефону. Але проблема полягає в тому, що він використовує інший інтегрований веб-переглядач (або емулятор), ніж той, який запускає програми фонегапу; тому результати не точні.

Емулятор Chrome

Те саме, що перевіряють Edge; він не дозволяє переглядати реальний веб-комплект 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 навіть у внутрішньому веб-перегляді програми. Це набагато кращий налагоджувач, ніж Weinre, але ключовим є використання останньої версії Android.

Останні Cordova збірки автоматично включають подібний налагодження, якщо це налагодження (це вимкнено в --release build).

Найкраще для мене - приєднати налагоджувач Chrome.

Для цього запустіть додаток в емуляторі чи пристрої (використовуючи емуляцію $ cordova emulate)

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

Ви побачите список із запущеними програмами. Ваш додаток має бути там. Клацніть на "оглянути".

Відкриється нове вікно з інструментами для розробників. Там ви можете натиснути на "консоль", щоб перевірити наявність помилок

Якщо у вашому додатку працює версія Cordova 3.3 або новішої версії, а на вашому пристрої працює версія Android 4.4+, ви можете скористатися віддаленою налагодженням веб-перегляду Chrome для налагодження програми Cordova.

Щоб мати змогу це зробити, спочатку потрібно ввімкнути налагодження USB на телефоні.

Потім відкрийте вкладку «Оглянути пристрої». У Chrome перейдіть у Налаштування > Додаткові інструменти > Перевірка пристроїв .

Якщо ви запускаєте додаток на своєму пристрої під час підключення до комп'ютера, веб-перегляд має з’явитися у списку пристроїв. Клацніть на посилання "Перевірити" вашого веб-перегляду, і на екрані має з’явитися інструмент налагодження.

Ось стаття, яка повністю пояснює, як це зробити: 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 та емулятори 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 для кордова дуже хороші, з емулятором пульсацій

Якщо ви використовуєте збірку phonegap, є можливість включити налагодження.

Для локальних збірок ви можете встановити 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-та-віддалене-налагодження-для Android

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

На ОС 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: // оглянути / # пристрої в адресний рядок
• Ваш пристрій / емулятор відображатиметься разом з будь-якими іншими розпізнаними пристроями, підключеними до вашого комп'ютера, а під вашим пристроєм будуть розміщені подробиці про кордовий "WebView" (в основному ваш додаток Кордова), який працює на пристрої / емуляторі ( як працює Кордова, це те, що в основному створює вікно "браузера" на вашому пристрої / емуляторі, в якому є "WebView", який працює у вашому додатку HTML / JavaScript)
• Клацніть посилання "перевірити" у розділі "Веб-перегляд", де відображається ваш пристрій / емулятор. Це відкриває інструменти для розробників Chrome, які тепер дозволяють налагоджувати свою програму.
• Виберіть вкладку "Джерела" інструментів для розробників Chrome, щоб переглянути JavaScript, який зараз працює ваш додаток Cordova на пристрої / емуляторі. Ви можете додати точки огляду в JavaScript, які дозволять налагоджувати код.
• Крім того, ви можете скористатися вкладкою "консоль", щоб переглянути будь-які помилки (які будуть показані червоним кольором), або внизу консолі з'явиться підказка '>'. Тут ви можете ввести будь-які змінні або об'єкти (наприклад, DOM-об'єкти), для яких потрібно перевірити поточне значення, і значення буде відображено.

Ось рішення за допомогою 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/

Використовуйте монітор пристроїв Android

Android Device Monitor поставляється з пакетами Android sdk, які ви встановили б раніше. На моніторі пристрою ви можете побачити весь журнал пристроїв, винятки, повідомлення про все. Це корисно для налагодження збоїв програми або будь-яких інших подібних проблем. Щоб виконати це, перейдіть до інструментів / папки всередині вашого Android sdk "/ var / android-sdk-linux / tools". Потім запустіть наступне

chmod +x monitor
./monitor

Якщо у вас є Windows, відкрийте файл monitor.exe. Внизу "LogCat" є вкладка, де ви побачите все повідомлення, пов’язане з пристроєм. Тут ви побачите всі повідомлення, включаючи винятки для пристроїв Android, які не видно пристроями для перевірки хрому. Не забудьте створити фільтри на вкладці логістичного входу знака «+», щоб ви бачили повідомлення лише для вашої програми.

Джерело: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

Ви також можете налагоджувати за допомогою хромованих програм 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". Ви також можете налагоджувати веб-програму, яку переглядають у веб-переглядачі Stock Android або Chrome на Android таким чином.

1. Увімкніть режим розробника на своєму пристрої Android (перейдіть до налаштувань -> про телефон -> натисніть 7x на номер збірки).

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

3. Запустіть Chrome на своєму комп’ютері та перейдіть до пункту chrome: // огляньте та натисніть кнопку "Оглянути" поруч із віддаленим пристроєм, який ви хочете налагодити (на вкладці "Пристрої"). АБО клацніть правою кнопкою миші в 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