Esiste una vera soluzione per il debug di app Cordova [chiuso]

Ho trascorso gli ultimi due giorni a cercare di capire come eseguire il debug di un'app HTML5 creata usando Cordova 3.2 e distribuita su un dispositivo Android 2.3. Tutti gli articoli / post che ho visto forniscono hack piuttosto che soluzioni reali :( e la maggior parte delle volte, nessuno di questi funziona nel mio caso; esegui il debug degli stili CSS e del codice Angularjs all'interno della mia app.

Finora ho provato;

debug.phonegap.com

Ho iniettato lo script nel index.htmlfile, quindi ho visitato l'URL generato in debug.phonegap.com ma non succede nulla; solo una pagina vuota.

Weinre

La maggior parte degli articoli che ho trovato indicano un repository obsoleto di Github che contiene un file Jar .. ma non è stato trovato :(

Bordo ispezionare

Funziona e mostra la pagina web che sto navigando sul PC all'interno del cellulare .. Ma il problema è che utilizza qualche altro browser (o emulatore) integrato rispetto a quello che esegue le app phonegap; quindi i risultati non sono accurati.

Emulatore di Chrome

Lo stesso di Edge inspect; non consente di visualizzare il vero web-kit v530 fornito con Android 2.3.

La soluzione dei sogni

La soluzione perfetta sarebbe un'estensione di Google Chrome (desktop) che ti consenta di passare dal browser desktop allo stesso trovato nelle piattaforme Android 2.3; nessuna emulazione, nessun trucco, solo il browser stesso con web-kit v 530.

Sfortunatamente tale soluzione non esiste :( o sbaglio?

Eventuali suggerimenti?

PER ANDROID:

Devi solo abilitare il "Debugger remoto USB" sul tuo dispositivo Android e collegarlo con un cavo USB. Quindi apri l'applicazione nel dispositivo. Chrome rileverà il browser remoto e potrai vedere la console nello stesso modo in cui la vedi quando usi Chrome localmente.

Usa questo link: chrome://inspect/#devicesnel browser Chrome (dovrai incollarlo nella barra di navigazione).

Se l'app si arresta in modo anomalo nel dispositivo, devi solo vedere il registro della console nel browser e vedere cosa succede. Puoi anche aggiungere funzionalità, cambiare variabili e sovrascrivere le funzioni nello stesso modo in cui lo facciamo con il nostro browser locale.

Leggi questo articolo per ulteriori informazioni sui passaggi da eseguire.

Funzionerà SOLO con dispositivi con Android 4.4+.

PER iOS:

Usa Safari per iOS, segui questi passaggi:

1. Nel dispositivo iOS vai su Impostazioni> Safari> Avanzate> Web Inspector per abilitare Web Inspector

2. Apri Safari sul tuo dispositivo iOS.

3.Collegalo al computer tramite USB.

4.Apri Safari sul tuo computer.

5. Nel menu Safari, vai su Sviluppo e cerca il nome del tuo dispositivo.

6. Selezionare la scheda che si desidera eseguire il debug.

AVVISO

Questa risposta è vecchia (gennaio 2014) da allora sono disponibili molte nuove soluzioni di debug.

Finalmente ho funzionato! usando weinre e cordova (nessuna build di Phonegap) e per evitare problemi ai futuri sviluppatori, che potrebbero affrontare lo stesso problema, ho realizzato un tutorial su YouTube ;)

Se puoi utilizzare un dispositivo Android 4.4+, puoi utilizzare il debug remoto di Chrome anche sul WebView interno dell'app. È un debugger molto migliore di Weinre, ma la chiave sta usando la recente versione di Android.

Le build Cordova recenti abilitano automaticamente questo tipo di debug purché sia ​​una build di debug (è disattivata nelle build - release).

Il meglio per me è collegare il debugger di Chrome.

Per farlo, esegui la tua app in un emulatore o dispositivo (usando $ cordova emulate)

quindi, apri Google Chrome e vai a chrome://inspect/

Vedrai un elenco con le app in esecuzione. La tua app dovrebbe essere lì. Fai clic su "Ispeziona".

Si aprirà una nuova finestra con gli strumenti per sviluppatori. Lì puoi fare clic su "console" per verificare la presenza di errori

Se la tua app esegue Cordova 3.3+ e il tuo dispositivo esegue Android 4.4+, puoi utilizzare il debug di Chrome Remote Webview per eseguire il debug dell'app Cordova.

Per poterlo fare, devi prima abilitare il debug USB sul tuo telefono.

Quindi apri la scheda "Ispeziona dispositivi". In Chrome, vai su Impostazioni > Altri strumenti > Ispeziona dispositivi .

Se avvii l'app sul tuo dispositivo mentre è connessa al tuo computer, The Webview dovrebbe apparire nell'elenco dei dispositivi. Fare clic sul collegamento "Ispeziona" della visualizzazione Web per visualizzare uno strumento di debug per la visualizzazione Web.

Ecco un articolo che spiega come farlo: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

Hai provato 'GapDebug' ? È gratis.

Sembra integrare le versioni di Safari Webkit Inspector e Chrome Dev Tools per offrire un'esperienza di debug integrata su OS X e Windows.

Un'altra opzione è Visual Studio, che ha il supporto pre-release per il debug delle app Cordova :

Esperienza di debug unificata . Lo sviluppo multipiattaforma spesso richiede uno strumento diverso per il debug di ciascun dispositivo, emulatore o simulatore. Strumenti diversi significano flussi di lavoro diversi e perdita di produttività ogni volta che si cambia dispositivo. Con Visual Studio, puoi utilizzare gli stessi strumenti di debug di livello mondiale per tutte le destinazioni di distribuzione, inclusi Windows, l'emulatore Android, i dispositivi Android collegati, i dispositivi iOS e gli emulatori e l'emulatore Apache Ripple.

Ora che Microsoft ha rilasciato Visual Studio Community Edition gratuitamente , puoi provarlo gratuitamente. Dovrai scaricare sia Visual Studio, sia Visual Studio Tools per Apache Cordova .

Per quanto ne so, l'unico strumento produttivo per il debug reale nelle app Cordova per piattaforme Android dalla 2.2 alla 4.3 è jshybugger . Weinre è un ispettore, non un debugger. JsHybugger utilizza il tuo codice per permetterti di eseguire il debug all'interno del WebView di Android.

Voglio solo aggiungere che puoi eseguire il debug delle app Android usando Genymotion . È molto più veloce dell'emulatore Android di serie.

È possibile utilizzare Intel XDK IDE per sviluppare ed eseguire il debug su emulatore o su dispositivo reale

Ho anche trovato ottimi strumenti Visual Studio 2015 RC per Cordova, con il suo emulatore di ripple

Se usi phonegap build, c'è un'opzione per abilitare il debug.

Per build locali, puoi installare weinre con npm: https://npmjs.org/package/weinre

E il link ai documenti weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/

E c'è qualcosa chiamato Chrome Remote Debugging ma non ne so molto, puoi dare un'occhiata all'articolo di Raymond Camden: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-e-Remote-Debug-per-Android

Documenti per il debug remoto di Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (se ho capito bene hai bisogno di un dispositivo Android con Chrome come browser predefinito) Forse il più vicino al tuo sogno soluzione?

Su Android 4.4+ con SDK installato:

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

Se usi Cordova 3.3 o versioni successive e il tuo dispositivo esegue Android 4.4 o versioni successive , puoi utilizzare "Debug remoto su Android con Chrome". Le istruzioni complete sono qui:

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

In sintesi:

• Collegare il dispositivo al computer desktop tramite un cavo USB
• Abilita il debug USB sul tuo dispositivo (sul mio dispositivo si trova in Impostazioni> Altro> Opzioni sviluppatore> Debug USB)

Oppure , se si utilizza Cordova 3.3+ e non si dispone di un dispositivo fisico con 4.4, è possibile utilizzare un emulatore che utilizza Android 4.4+ per eseguire l'applicazione tramite l'emulatore sul computer desktop.

• Esegui l'applicazione Cordova sul dispositivo o sull'emulatore
• In Chrome sul tuo computer desktop, inserisci chrome: // inspect / # devices nella barra degli indirizzi
• Il tuo dispositivo / emulatore verrà visualizzato insieme a qualsiasi altro dispositivo riconosciuto connesso al tuo computer e sotto il tuo dispositivo ci saranno i dettagli del "WebView" di Cordova (sostanzialmente la tua app Cordova), che è in esecuzione sul dispositivo / emulatore ( il modo in cui Cordova funziona è che fondamentalmente crea una finestra 'browser' sul tuo dispositivo / emulatore, all'interno della quale c'è un 'WebView' che è la tua app HTML / JavaScript in esecuzione)
• Fare clic sul collegamento "Ispeziona" nella sezione "WebView" in cui è elencato il dispositivo / emulatore. In questo modo vengono visualizzati gli strumenti di sviluppo di Chrome che ora consentono di eseguire il debug dell'applicazione.
• Seleziona la scheda "fonti" degli strumenti di sviluppo di Chrome per visualizzare JavaScript attualmente in esecuzione sulla tua app Cordova sul dispositivo / emulatore. È possibile aggiungere punti di interruzione nel JavaScript che consentono di eseguire il debug del codice.
• Inoltre, puoi utilizzare la scheda "console" per visualizzare eventuali errori (che verranno visualizzati in rosso), oppure nella parte inferiore della console verrà visualizzato un prompt ">". Qui è possibile digitare qualsiasi variabile o oggetto (ad es. Oggetti DOM) di cui si desidera controllare il valore corrente e il valore verrà visualizzato.

Ecco la soluzione usando Phonegap Build. Aggiungi quanto segue a config.xml per poter ispezionare con il debug di Chrome Remote Webview.

Innanzitutto, assicurati che il tag del widget contenga 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">

Quindi aggiungere quanto segue

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

Funziona per me su Nexus 5, Phonegap 3.7.0.

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

Costruisci l'app in Phonegap Build, installa l'APK, collega il telefono a USB, abilita il debug USB sul tuo telefono quindi visita chrome: // inspect.

Fonte: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Usa Android Device Monitor

Android Device Monitor include pacchetti con Android SDK che avresti installato in precedenza. Nel monitor del dispositivo puoi vedere tutto il registro del dispositivo, le eccezioni, i messaggi tutto. Ciò è utile per eseguire il debug di arresti anomali dell'applicazione o altri problemi simili. Per eseguirlo, vai su cartella / strumenti all'interno del tuo sdk android "/ var / android-sdk-linux / tools". Quindi eseguire il seguente

chmod +x monitor
./monitor

Se sei su Windows, apri direttamente il file monitor.exe. C'è una scheda sotto "LogCat" dove vedrai tutti i messaggi relativi al dispositivo. Qui vedrai tutti i messaggi incluse le eccezioni del dispositivo Android che non sono visibili sul dispositivo Chrome Inspect. Assicurati di creare filtri utilizzando il segno "+" nella scheda logcat, in modo da visualizzare i messaggi solo per la tua applicazione.

Fonte: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

Puoi anche eseguire il debug con Chrome delle tue app html5

Creo un .bat per aprire Chrome in modalità debug

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

È possibile eseguire il debug delle applicazioni Android Cordova installate sul telefono in remoto dal computer tramite il cavo USB (è anche possibile fare clic in remoto sull'applicazione Web come se si stesse visualizzando l'applicazione Web dal proprio computer) con "Chrome Remote Debugging". In questo modo puoi anche eseguire il debug dell'applicazione Web visualizzata nel browser Stock Android o Chrome su Android .

1. Abilita la modalità sviluppatore sul tuo dispositivo Android (vai su Impostazioni -> Informazioni sul telefono -> tocca 7x sul numero di build).

2. Collega il tuo computer al telefono tramite cavo USB.

3. Pranza Chrome sul tuo computer e vai a chrome: // inspect e fai clic sul pulsante "Inspect" accanto al dispositivo remoto di cui desideri eseguire il debug (nella scheda "Dispositivi"). OPPURE fare clic con il pulsante destro del mouse all'interno di Chrome sul computer -> Ispeziona -> Costumizza e controlla DevTools (3 punti verticali - angolo in alto a destra degli strumenti di sviluppo) -> Altri strumenti -> Dispositivi remoti -> sotto Dispositivi sul lato sinistro, fai clic su dispositivo a cui si è collegati tramite USB -> fare clic sul pulsante Ispeziona per l'applicazione desiderata.

4. Quindi fai clic su "Console" e puoi eseguire il debug di JavaScript allo stesso modo, come faresti con una normale applicazione web con gli strumenti di sviluppo di Chrome.

Ho adorato weinre! Come usarlo:

Innanzitutto, indossa il tuo index.html(assicurati che app.settings.debugUrlsia impostato prima di questo):

  <!-- 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>

Poi:

• installare: sudo npm install -g weinre
• correre: weinre --boundHost -all-
• aperto sul browser: http: // localhost: 8080 / client / # anonimo
• guarda gli obiettivi apparire quando apri l'app

Basato su http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

I dispositivi con Android <= 4.0.4 devono aggiungere il plug-in https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt