¿Cómo puedo depurar javascript en Android?

Estoy trabajando en un proyecto que involucra a Raphaeljs. Resulta que no funciona en Android. Lo hace en el iPhone.

¿Cómo diablos hago para depurar algo en el navegador de Android? Es WebKit, así que si conozco la versión, ¿la depuración en esa versión completa de WebKit producirá los mismos resultados?

Actualización: depuración remota

Anteriormente, el registro de la consola era la mejor opción para depurar JavaScript en Android. En estos días, con la depuración remota de Chrome para Android, podemos hacer uso de todas las bondades de las Herramientas para desarrolladores de Chrome para escritorio en Android. Consulte https://developers.google.com/chrome-developer-tools/docs/remote-debugging para obtener más información.

Actualización: consola de JavaScript

También puede navegar por about: debug en la barra de URL para activar el menú de depuración y la consola de error de JavaScript con dispositivos Android recientes. Debería ver SHOW JAVASCRIPT CONSOLE en la parte superior del navegador.

Actualmente en Android 4.0.3 (Ice Cream Sandwich), el logcat sale al canal del navegador. Para que pueda filtrar usando adb logcat browser:* *:S.

Respuesta original

Puede usar el consoleobjeto JavaScript incorporado para imprimir mensajes de registro que puede revisar adb logcat.

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

Produce esta salida:

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://...

Determinar la versión de WebKit

Si escribe javascript:alert(navigator.userAgent)en la barra de ubicación, verá la versión de WebKit listada, por ejemplo

En cromo: 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

En el emulador de 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

nótese bien

Las versiones de WebKit que no forman parte de una versión de Safari tienen un + después del número de versión, y su número de versión es generalmente más alto que la última versión lanzada de WebKit. Entonces, por ejemplo, 528+ es una compilación no oficial de WebKit que es más nueva que la versión 525.x que se envió como parte de Safari 3.1.2.

Tratar:

1. abra la página que desea depurar

2. mientras que en esa página, en la barra de direcciones de un navegador de Android, escriba:

   about:debug 

   (Tenga en cuenta que no sucede nada, pero se han habilitado algunas opciones nuevas).

Funciona en los dispositivos que he probado. Lea más sobre el navegador de Android sobre: ​​depuración, ¿qué hacen esas configuraciones?

Editar: lo que también ayuda a recuperar más información como el número de línea es agregar este código a su script:

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

El http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) proporciona una buena manera de acceder al contenido de su página web.

Yo uso Weinre , parte de Apache Cordova .

Con Weinre, obtengo la consola de depuración de Google Chrome en mi navegador de escritorio, y puedo conectar Android a esa consola de depuración, y depurar HTML y CSS. Puedo ejecutar comandos Javascript en la consola, y afectan la página web en el navegador de Android. Los mensajes de registro de Android aparecen en la consola de depuración de escritorio.

Sin embargo, creo que no es posible ver o recorrer el código Javascript real. Entonces combino Weinre con mensajes de registro.

(No sé mucho sobre JConsole, pero me parece que la inspección de HTML y CSS no es posible con JConsole, solo comandos y registro de Javascript (?)).

Echa un vistazo a jsHybugger . Le permitirá depurar remotamente su código js para:

• Aplicaciones híbridas de Android (webview, phonegap, worklight)
• Páginas web que se ejecutan en el navegador de Android predeterminado (no Chrome, admite la extensión ADB sin esta herramienta)

Cómo funciona esto (más detalles y alternativas en el sitio de proyectos, esta fue la mejor manera).

1. Instale el APK jsHybugger en su dispositivo
2. Habilite la depuración de USB en su dispositivo.
3. Conecte el dispositivo Android a su computadora de escritorio a través de USB
4. Ejecute la aplicación en el dispositivo Android ('jsHybugger')
5. Ingrese la URL de destino y la página en la aplicación. Presiona Start Service y finalmente Open Browser
   • Se le presentará una lista de navegadores instalados, elija uno.
   • El navegador se inicia.
6. De vuelta en su computadora de escritorio, abra Chrome en Chrome: // inspeccionar /
7. Aparecerá una ventana de inspectores con las herramientas de depuración de Chrome vinculadas a la página en el dispositivo Android.
8. depurar

Nuevamente, con Chrome en Android use la extensión ADB sin jsHybugger. Creo que esto ya se describe en la respuesta aceptada a esta pregunta.

Para su información, la razón por la que RaphaelJS no funciona en Android es que Android webkit (a diferencia del iPhone webkit) no es compatible con SVG en este momento. Google acaba de llegar a la conclusión de que SVG admite un Android es una buena idea, por lo que no estará disponible por algún tiempo.

Depuración remota completa de Chrome del navegador nativo de Android en un Galaxy S6 en Android 5.1.1:

1. Habilite la depuración USB en el teléfono (Configuración, acerca de, toque rápidamente el número de compilación, configuración del desarrollador, depuración USB)
2. Abrir "Internet"
3. Vaya a 'acerca de: depuración' (verá un error)
4. MÁS menú> Configuración> Depurar> Depuración remota
5. Conecte el teléfono a la computadora con un cable USB
6. En el teléfono, en el navegador web de Internet, abra el sitio que desea depurar
7. Abra Chrome en la computadora
8. Vaya a 'chrome: // inspeccionar'
9. Haga clic en inspeccionar en la pestaña del navegador que desea inspeccionar

Los dispositivos Galaxy S5 se muestran en Chrome pero las pestañas solo se muestran después de reiniciar. Después de reiniciar e intentar adjuntar, el navegador móvil se bloquea.

Raphael no es compatible con los navegadores Android pre 3.0, ese es el problema. No tienen soporte para gráficos SVG. Sin embargo, tiene soporte para lienzo. Si no necesita animarlo, puede renderizar los gráficos con canvg:

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

Así es como solucionamos este problema para representar iconos SVG en el navegador predeterminado de Android.

El about:debug(o chrome:\\debugambas de las cuales dicen página no se puede encontrar, pero permiten el menú de depuración en la configuración) cuando se trató en Chrome u Opera en Android 4.4.2 KitKat en un Tab de Samsung

Si tiene permisos ROOT en su dispositivo, puede ver los mensajes de la consola directamente en el dispositivo. Use una aplicación como CatLog para ver la salida del registro: https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=en Esto le permitirá ver toda la actividad de logcat.

En Android KitKat / 4.4.2, la consola del navegador se envía al canal Chromium. Puede filtrar por "Chromium" para obtener toda la actividad del navegador (incluida la actividad interna del navegador), o simplemente filtrar por "Consola" para ver solo el registro de la consola del navegador.

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

Poner en la línea de dirección chrome://about. Verá enlaces a todas las páginas de desarrollo posibles.

Puede probar la consola integrada YConsole a js. Es liviano y fácil de usar.

• Captura registros y errores.
• Editor de objetos

Cómo utilizar :

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

Cuando ejecute el emulador de Android, abra su navegador Google Chrome y, en el 'campo de dirección', ingrese:

chrome://inspect/#devices

Verá una lista de sus objetivos remotos. Encuentre su objetivo y haga clic en el enlace 'inspeccionar'.

Chrome tiene una característica maravillosa que simplemente lleva el contenido real de Android Chrome (incluida la inspección, etc.) a la pantalla de la PC ...

• Habilite la depuración de USB en el dispositivo, tal vez también necesite conectarse una vez adb devicespara activar el diálogo "permitir comunicación con ..." en el dispositivo móvil,
• conecta el dispositivo Android a la PC,
• iniciar Chrome en ambos, y
• luego navegue a chrome://inspect/#devicesen la PC.
• Aquí, las pestañas del teléfono móvil Chrome se enumeran y se pueden inspeccionar.

También hay un manual detallado en la red: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(descubrió que después adb logcatno mostró nada del navegador)

Mi solución es (para el navegador de valores):

• Stock Browser
• "consolo.log" en el código fuente JS
• Depuración de USB habilitado
• Android SDK
• Desde el SDK de Android: monitor.bat
• Monitor de filtro como la imagen adjunta

Android Studio proporciona todo lo que necesita para ver console.log y otros. En logcat simplemente filtre a "/ Web Console" y verá sus registros js ...

Si tiene algún problema, puede agregar este complemento: https://github.com/apache/cordova-plugin-console

Si está buscando opciones no remotas:

En versiones anteriores y no rooteadas de Jellybean, se puede usar un visor logcat si android.permission.READL_LOGS se otorga a través de adb una vez.

En firefox, hay un complemento de consola que lee y muestra todos los registros de aplicaciones y también hay firebug lite .

Puede probar "javascript-compiler-deva" desde la biblioteca npm ejecutando el comando "npm install javascript-compiler-deva" y luego ejecutando compiler.is usando "node compiler.js".

Crea un servidor en el puerto 8888. Luego puede presionar " http: // localhost: 8888 " e ingresar su código JavaScript y puede ver el resultado de cualquier código JavaScript que incluya "console.log" en el navegador del teléfono.

También está alojado en " https://javascript-compiler-deva.herokuapp.com/ "

Las opciones locales de depuración / about: config ... parecen no funcionar en los navegadores chrome / ff / .. 2020+.

Otro navegador con consola js no remota es DevBrowser

o WebInspector (el selector de archivos no funciona)