¿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 voy a depurar algo en el navegador de Android? Es WebKit, entonces si conozco la versión, ¿la depuración en esa versión completa de WebKit produce los mismos resultados?

Actualización: depuración remota

Anteriormente, el registro de la consola era la mejor opción para depurar JavaScript en Android. Actualmente, con la depuración remota de Chrome for Android, podemos aprovechar todas las bondades de las herramientas de desarrollo de Chrome for Desktop 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 hasta: depuración 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 saca al canal del navegador. Por lo tanto, puede filtrar utilizando el adb logcat browser:* *:S


Respuesta original

Puede usar el objeto de JavaScript incorporado en la console para imprimir mensajes de registro que puede revisar con adb logcat .

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

Produce este resultado:

 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 direcciones, verá la versión de WebKit, por ejemplo,

En 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

En Android Emulator 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 son parte de una versión de Safari tienen un + después del número de versión, y su número de versión generalmente es más alto que la versión más reciente de WebKit. Entonces, por ejemplo, 528+ es una comstackció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 está en esa página, en la barra de direcciones de un navegador de Android, escriba:

     about:debug 

    (Tenga en cuenta que no ocurre 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 secuencia de comandos:

 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 usarlo para acceder al contenido de su página web.

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 de Javascript en la consola y afectan a 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. Así que 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 de Javascript y registro (?)).

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 ejecuta en el navegador predeterminado de Android (no en Chrome, admite la extensión ADB sin esta herramienta)

Cómo funciona esto (más detalles y alternativas en el sitio del proyecto, esto fue lo que encontré para ser la mejor manera).

  1. Instale el jsHybugger APK 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 y la página de destino en la aplicación. Presione Start Service y finalmente Open Browser
    • Aparecerá una lista de navegadores instalados, elija uno.
    • El navegador se inicia.
  6. De vuelta en su computadora de escritorio, abra Chrome en chrome: // inspect /
  7. Aparecerá una ventana de inspectores con las herramientas de depuración de Chrome vinculadas a la página en el dispositivo Android.
  8. eliminar errores!

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.

FYI, la razón por la que RaphaelJS no funciona en Android es que el webkit de Android (a diferencia de iPhone webkit) no es compatible con SVG en este momento. Google acaba de llegar a la conclusión de que SVG admite un android como una buena idea, por lo que no estará disponible todavía por un 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 de USB en el teléfono (Configuración, acerca de, toque rápidamente el número de comstackción, configuración del desarrollador, depuración de USB)
  2. Abra “Internet”
  3. Navegue a ‘about: debug’ (verá un error)
  4. MÁS menú> Configuración> Depuración> 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. Abrir Chrome en la computadora
  8. Navega 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 tabs 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 navegadores Android pre 3.0, ese es su problema. No tienen soporte para gráficos SVG. Sin embargo, tiene soporte para canvas. Si no necesita animarlo, puede renderizar los gráficos con canvg:

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

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

El about:debug (o chrome:\\debug los cuales dicen que la página no se puede encontrar, pero habilita el menú Debug en la configuración) cuando se prueba con Chrome o Opera en Android KitKat 4.4.2 en un Samsung Tabulador

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 el resultado 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 dev posibles.

Puede probar YConsole una consola incrustada js. Es liviano y simple de usar.

  • Catch logs y errores.
  • Editor de objetos

Cómo utilizar :

   

Según este enlace , la depuración de javascript se puede realizar descargando el archivo firebug.js mencionado en el enlace y cargando el archivo descargado en su página HTML para que pueda depurar sin recurrir a Internet.

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

  • Navegador de archivo
  • “consolo.log” en el código fuente de JS
  • Debug USB habilitado
  • SDK de Android
  • Desde Android SDK: monitor.bat
  • Monitorear el filtro como la imagen adjunta enter image description here

Si está comstackndo una aplicación ‘híbrida’ (cordova), el complemento CrossWalk utiliza la vista web de Google Chrome en lugar de la vista web estándar de Internet que viene con Android. Cuando instalé el complemento, venía con la capacidad de depuración.

Paso de peatones

Android studio proporciona todo lo que necesita para ver console.log y otros. En logcat solo filtra a “/ Web Console” y verás tus registros js …

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

Si busca opciones no remotas:

En lanzamientos de Jellybean anteriores y no rooteados se puede usar un visor de logcat si android.permission.READL_LOGS se concede a través de adb una vez.

En Firefox, hay un complemento de consola que lee y muestra todos los registros de la aplicación y también Firebug Lite .

mobile-console-log le permite mostrar cualquier console.log a Chrome Devtools desde cualquier dispositivo.

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 objectives remotos. Encuentra tu objective y haz clic en el enlace ‘inspeccionar’.

Puede probar “javascript-compiler-deva” desde la biblioteca npm ejecutando el comando “npm install javascript-compiler-deva” y luego ejecutando el 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, incluido “console.log” en el buscador del teléfono.

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