Come posso eseguire il debug di JavaScript su Android?

Sto lavorando a un progetto che coinvolge Raphaeljs. Si scopre che non funziona su Android. Lo fa su iPhone.

Come diavolo posso fare per eseguire il debug di qualcosa sul browser Android? È WebKit, quindi se conosco la versione, il debug su quella versione completa di WebKit produrrà gli stessi risultati?

Aggiornamento: debug remoto

In precedenza, la registrazione della console era l'opzione migliore per il debug di JavaScript su Android. In questi giorni con Chrome per il debug remoto di Android, siamo in grado di sfruttare tutta la bontà degli strumenti di sviluppo di Chrome for Desktop su Android. Scopri https://developers.google.com/chrome-developer-tools/docs/remote-debugging per ulteriori informazioni.

Aggiornamento: console JavaScript

Puoi anche accedere a about: debug nella barra degli URL per attivare il menu debug e la console degli errori JavaScript con dispositivi Android recenti. Dovresti vedere SHOW JAVASCRIPT CONSOLE nella parte superiore del browser.

Attualmente in Android 4.0.3 (Ice Cream Sandwich), il logcat esce sul canale del browser. Quindi puoi filtrare usando adb logcat browser:* *:S.

Risposta originale

È possibile utilizzare l' consoleoggetto JavaScript incorporato per stampare i messaggi di registro che è possibile rivedere adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Produce questo output:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

Determinazione della versione di WebKit

Se si digita javascript:alert(navigator.userAgent)nella barra degli indirizzi verrà visualizzata la versione di WebKit, ad esempio

In Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Sull'emulatore Android Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Le versioni di WebKit che non fanno parte di una versione Safari hanno un + dopo il numero di versione e il loro numero di versione è generalmente superiore all'ultima versione di WebKit rilasciata. Quindi, ad esempio, 528+ è una build non ufficiale di WebKit che è più recente della versione 525.x fornita come parte di Safari 3.1.2.

Provare:

1. aprire la pagina di cui si desidera eseguire il debug

2. mentre in quella pagina, nella barra degli indirizzi di un browser Android stock, digita:

   about:debug 

   (Nota che non succede nulla, ma alcune nuove opzioni sono state abilitate.)

Funziona sui dispositivi che ho provato. Maggiori informazioni sul browser Android riguardano: debug, cosa fanno queste impostazioni?

Modifica: ciò che aiuta anche a recuperare ulteriori informazioni come il numero di riga è aggiungere questo codice al tuo script:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Il http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) fornisce un modo piacevole che puoi usare per accedere al contenuto della tua pagina web.

Uso Weinre , parte di Apache Cordova .

Con Weinre, ottengo la console di debug di Google Chrome nel mio browser desktop e posso connettere Android a quella console di debug e eseguire il debug di HTML e CSS. Posso eseguire i comandi Javascript nella console e influiscono sulla pagina Web nel browser Android. I messaggi di registro di Android vengono visualizzati nella console di debug desktop.

Tuttavia, penso che non sia possibile visualizzare o scorrere l'attuale codice Javascript. Quindi combino Weinre con i messaggi di registro.

(Non so molto su JConsole ma mi sembra che l'ispezione HTML e CSS non sia possibile con JConsole, solo i comandi Javascript e la registrazione (?).)

Dai un'occhiata a jsHybugger . Ti consentirà di eseguire il debug in remoto del codice js per:

• App ibride Android (webview, phonegap, worklight)
• Pagine Web che vengono eseguite nel browser Android predefinito (non Chrome, supporta l'estensione ADB senza questo strumento)

Come funziona (maggiori dettagli e alternative sul sito dei progetti, questo è quello che ho trovato essere il modo migliore).

1. Installa l'APK jsHybugger sul tuo dispositivo
2. Abilita il debug USB sul tuo dispositivo.
3. Collega il dispositivo Android al computer desktop tramite USB
4. Esegui l'app sul dispositivo Android ('jsHybugger')
5. Inserisci l'URL e la pagina di destinazione nell'app. Premi Avvia servizio e infine Apri browser
   • Ti verrà presentato un elenco di browser installati, scegline uno.
   • Il browser si avvia.
6. Sul tuo computer desktop apri Chrome su chrome: // inspect /
7. Apparirà una finestra di ispezione con gli strumenti di debug di Chrome collegati alla pagina sul dispositivo Android.
8. debug via!

Ancora una volta, con Chrome su Android usa l'estensione ADB senza jsHybugger. Penso che questo sia già descritto nella risposta accettata a questa domanda.

Cordiali saluti, il motivo per cui RaphaelJS non funziona su Android è che il webkit Android (a differenza del webkit di iPhone) non supporta SVG in questo momento. Google ha appena concluso che SVG supporta un androide è una buona idea, quindi non sarà ancora disponibile per qualche tempo.

Debug remoto completo di Chrome del browser nativo Android su un Galaxy S6 su Android 5.1.1:

1. Abilita debug USB sul telefono (Impostazioni, informazioni su, tocca rapidamente il numero di build, impostazioni dello sviluppatore, debug USB)
2. Apri "Internet"
3. Vai su "about: debug" (vedrai un errore)
4. ALTRO menu> Impostazioni> Debug> Debug remoto
5. Collegare il telefono al computer con un cavo USB
6. Sul telefono, nel browser Web di Internet, aprire il sito di cui si desidera eseguire il debug
7. Apri Chrome sul computer
8. Passare a "chrome: // inspect"
9. Fare clic su Ispeziona nella scheda del browser che si desidera ispezionare

I dispositivi Galaxy S5 vengono visualizzati in Chrome ma le schede vengono visualizzate solo dopo il riavvio. Dopo il riavvio e il tentativo di collegarsi, il browser del dispositivo mobile si arresta in modo anomalo.

Raphael non è supportato su browser Android 3.0 precedenti, questo è il tuo problema. Non hanno supporto per la grafica SVG. Ha supporto per la tela però. Se non è necessario animarlo, è possibile eseguire il rendering della grafica con canvg:

http://code.google.com/p/canvg/

È così che abbiamo risolto questo problema per il rendering delle icone SVG nel browser Android predefinito.

La about:debug(o chrome:\\debugentrambe le quali dicono che la pagina non è stata trovata, ma abilita il menu Debug nelle impostazioni) quando provata su Chrome o Opera su Android KitKat 4.4.2 su una scheda Samsung

Se disponi delle autorizzazioni ROOT sul tuo dispositivo, puoi visualizzare i messaggi della console direttamente sul dispositivo. Utilizza un'app come CatLog per visualizzare l'output del registro - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=it Ciò ti consentirà di visualizzare tutte le attività di logcat.

In Android KitKat / 4.4.2, la console del browser viene inviata al canale Chromium. Puoi filtrare per "Chromium" per ottenere tutte le attività del browser (includi l'attività interna del browser) o semplicemente filtrare per "Console" per vedere solo il registro della console del browser.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Inserisci nella riga dell'indirizzo chrome://about. Vedrai i collegamenti a tutte le possibili pagine di sviluppo.

Puoi provare YConsole una console integrata js. È leggero e semplice da usare.

• Registri di cattura ed errori.
• Editor di oggetti.

Come usare :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Quando esegui l'emulatore Android, apri il tuo browser Google Chrome e, nel campo "indirizzo", inserisci:

chrome://inspect/#devices

Vedrai un elenco dei tuoi obiettivi remoti. Trova il tuo obiettivo e fai clic sul link "Ispeziona".

Chrome ha una meravigliosa funzione che porta semplicemente i contenuti di Android Chrome attuali (incl. Ispezione ecc.) Sullo schermo del PC ...

• Abilita il debug USB sul dispositivo, forse devi anche connetterti una volta tramite adb devicesper attivare il dialogo "consenti comunicazione con ..." sul dispositivo mobile,
• collega il dispositivo Android al PC,
• avvia Chrome su entrambi e
• quindi navigare chrome://inspect/#devicessu sul PC.
• Qui, le schede del telefono Chrome sono elencate e possono essere ispezionate.

C'è anche un manuale dettagliato in rete: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(scoperto che dopo adb logcatnon ha mostrato nulla dal browser)

La mia soluzione è (per il browser stock):

• Stock Browser
• "consolo.log" nel codice sorgente JS
• Debug USB abilitato
• SDK Android
• Da Android SDK: monitor.bat
• Monitora il filtro come immagine allegata

Android Studio fornisce tutto ciò di cui hai bisogno per vedere console.log e altro. In logcat basta filtrare su "/ Web Console" e vedrai i tuoi registri js ...

Se riscontri problemi, puoi aggiungere questo plug-in: https://github.com/apache/cordova-plugin-console

Se stai cercando opzioni non remote:

Nelle versioni precedenti e non rooted di Jellybean è possibile utilizzare un visualizzatore logcat se android.permission.READL_LOGS viene concesso una volta tramite adb.

Su Firefox, c'è un componente aggiuntivo della console che legge e mostra tutti i registri delle app e c'è anche Firebug Lite .

Puoi provare "javascript-compiler-deva" dalla libreria npm eseguendo il comando "npm install javascript-compiler-deva" e quindi eseguendo compiler.is usando "node compiler.js".

Crea un server sulla porta 8888. Puoi quindi premere " http: // localhost: 8888 " e inserire il tuo codice JavaScript e vedere il risultato di qualsiasi codice JavaScript incluso "console.log" nel browser del telefono stesso.

È anche ospitato in " https://javascript-compiler-deva.herokuapp.com/ "

Le opzioni di debug / about: config ... locali sembrano non funzionare più nei browser Chrome / ff / .. 2020+.

Un altro browser con console js non remota è DevBrowser

o WebInspector (selettore file non funzionante)