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


130

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?


Risposte:


139

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.

inserisci qui la descrizione dell'immagine


3
Vedo la console e la mia app in Chrome sul mio computer, mentre il mio smartphone è collegato tramite USB. Soluzione molto interessante.
emilie zawadzki,

Non ha trovato il mio telefono fino a quando non ho corso adb start-server.
Leukipp

@Leukipp Devo anche affrontare lo stesso problema, ma successivamente aggiungere ADT all'avvio del mio sistema Windows. il mio problema si risolve ..
Neotrix

2
La risposta presenta una soluzione al problema sbagliato: la domanda non riguarda il debug di un browser, ma il debug di un WebView. Questi sono leggermente diversi come evidente da una moltitudine di utenti frustrati confusi perché le loro visualizzazioni Web in cui vengono visualizzate le loro applicazioni, non vengono visualizzate chrome://inspect.
AMN

1
Android 4.4+ :( Questo è il motivo ...
candlejack

76

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 ;)


Mi mancava la corretta configurazione IP, ora funziona perfettamente, grazie mille!
Juan Carlos Alpizar Chinchilla,

8
Weinre non è debugger, consente solo ispezioni DOM, non è possibile eseguire il debug di js e persino guardare i messaggi della console
Bogdan Mart,

19
... in che modo un link a un video di YouTube è una risposta accettabile?
Meekohi,

2
@Meekohi ha realizzato il video :)
candlejack il

10
Come per tutte le risposte di StackOverflow, viene visualizzato un collegamento a una soluzione (creata dall'autore o meno). Conserva le soluzioni qui e non esternamente dove potrebbero essere andate un giorno.
DarkNeuron,

56

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).


Sembra fantastico - ho anche notato che è disponibile un plug-in di build phonegap per abilitare questa funzione.
DavidC

1
Come da tuo commento: è disattivato in --release builds (Thats not true)
Luckyy

9
Ri. questo, ho trovato utile questo link . Di conseguenza, utilizzare Chrome per navigare chrome://inspecte assicurarsi che "Scopri dispositivi USB" sia selezionato. Questo mostrerà qualsiasi WebView in grado di eseguire il debug nei dispositivi collegati.
Sharadh,

il problema con questa soluzione è che console.lognon sembra funzionare. Devi passare attraverso il alertsche è davvero un peso.
João Pimentel Ferreira,

(it's turned off in --release builds).questo avviso mi ha salvato la giornata!
Maswerdna,

32

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


7
Per favore ricontrolla che la tua risposta funzionerà nelle condizioni di OP. Il debugger di Chrome funziona solo con Android 4.4+.
Chris Neve,

20

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/


Questa è una delle risposte migliori e più complete di questa sezione di commenti, anche se non aiuta OP a causa di 4.4+.
Chris Neve,

7

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.


1
Questo è uno strumento essenziale soprattutto per gli utenti Windows che vogliono connettersi al passaggio debug iPhone - lo consiglio vivamente.
Mike Nelson,

7

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 .


Dal momento che l'XDK di una volta incredibile di Intel ha interrotto il supporto per il suo debugger, ho dovuto cercare una nuova opzione. Visual Studio è l'unico che ho trovato che è una soluzione all-in-one (IDE, debugger, gestore di plug-in, ecc.). L'installazione richiede un po 'di tempo ma è molto semplice. Uso Enterprise 2015. Costruisce ma non sono sicuro se pubblica ancora (non ho raggiunto quel punto).
Victor Stoddard,

5

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.


5

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


1
Genymotion consente di utilizzare il debug remoto di Chrome poiché non è trattato come emulatore ma come dispositivo reale. Funzionano anche la fotocamera e altre funzionalità hardware, ma alcune sono a pagamento.
shirk3y,

4

È 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


3

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?


Grazie per le informazioni; Preferisco usare il modo gratuito cordova;) e ora ho funzionato (controlla la mia risposta) grazie! +1
numediaweb,

1
controlla la mia modifica, sembra che Chrome non sia lontano dalla soluzione dei tuoi sogni dopo tutto
QuickFix

Si noti che il dispositivo che sto utilizzando esegue Android 2.3 mentre il debug remoto di Chrome richiede Android 4.4 o versioni successive. Ma grazie "QuickFix"; Ora ho tutto funzionato .. vedi il mio tutorial;)
numediaweb

3

Su Android 4.4+ con SDK installato:

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

2

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.

2

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/


SANTO BEJEEZUS !!! Posso finalmente eseguire il debug del mio apk !!! Grazie mille, non so perché questo non sia altrove più importante. Includendo queste note alla lettera nel readme del mio progetto.
Josh

2

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/


Per gli utenti Linux, a seconda del metodo di installazione dell'SDK, è possibile trovarlo anche in ~ / Android / Sdk / tools / monitor o provare a digitare monitor.
Strixy,

2

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

1
Grazie, ma ho trovato che l'approccio migliore è usare weinre per eseguire il debug del desing con il browser webkit integrato del dispositivo stesso!
numediaweb,

1
In secondo luogo, mentre ripple ti dà un'idea media di come apparirà quando lo rilasci, il che è buono, a volte ci sono differenze nel confrontare l'emulatore e il dispositivo reale, principalmente perché l'emulatore funziona con il motore del browser web che hai ' è in esecuzione su di esso, il che non è lo stesso in alcune situazioni in cui il dispositivo funzionerà. Quindi di solito uso entrambi, ripple per progettare l'interfaccia utente e weinre per testare il comportamento quando qualcosa non funziona come previsto
Juan Carlos Alpizar Chinchilla

2

È 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.


Funziona sul mio telefono (Android 6) ma non funziona sul mio tablet (nota 8 Android 4.4)
Danielo515

Si è verificato un problema con la vista Web Android. L'installazione del plug-in crosswalk mi consente di eseguire questo tipo di debug su dispositivi più vecchi (fino a jelly bean)
Danielo515

1

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:

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


Weinre non è debugger, consente solo ispezioni DOM, non è possibile eseguire il debug di js e nemmeno guardare i messaggi della console,
Bogdan Mart

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.