¿Cómo puedo depurar javascript en Android?


281

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?


2
Fuera del tema, pero considere revisar Snap.svg. Es el remake de RaphaelJS de la misma persona. Se recrea sin el soporte de los navegadores antiguos, por lo que es más rápido, el código es más limpio, etc.
Lajos Meszaros

Nota para la respuesta aceptada: en Samsung Experience> = 9, si no ha encontrado su dispositivo, cambie el tipo de USB al conector de sonido.
BOZ

Respuestas:


245

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.


12
¿cuándo? ¿cuándo podré depurar localmente en Android cuando no pueda hacerlo de forma remota?
Michael

No estoy seguro. No tendría mucho sentido en un dispositivo pequeño como un teléfono porque el espacio en la pantalla sería muy limitado para un inspector web completo. En las tabletas puede tener más sentido, pero tendrían que volver a imaginar el Inspector web para una interfaz táctil que es un esfuerzo significativo. Tal vez están trabajando en eso, pero quién sabe.
Pierre-Antoine LaFayette

1
Sospecho que un primer corte sin adaptaciones significativas sería un buen comienzo, es decir, permitir que se use una cantidad significativa de funcionalidad. Algunas tabletas incluso tienen un lápiz óptico para que los eventos del mouse funcionen igual.
Michael

¿Qué fue eso de un dispositivo pequeño como un teléfono?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Michael Dillon el

Nota del enlace de depuración remota de Chrome para Android: "Debe iniciar sesión en Chrome con una de sus cuentas de Google. La depuración remota no funciona en modo incógnito o modo invitado". ¿Wow por qué?
sdbbs

135

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

23
Acabo de intentarlo, pero el truco about: debug no funcionó en mi Nexus S con ICS 4.0.3.
derflocki

66
Debe intentar navegar about:debugdesde dentro de la misma pestaña en la que tiene abierta su página actual. En lugar de navegar, mostrará "SHOW JAVASCRIPT CONSOLE" en la parte superior. Si intenta acceder about:debugdesde una nueva pestaña, no funcionará.
Denilson Sá Maia

10
Este es solo el navegador de valores, ¿verdad? Lo estoy probando en un Chrome para Android beta en KitKat sin suerte. (parece que KitKat ya no tiene el navegador de valores)
James

77
Esto necesita un navegador de acciones de Android, y no funciona en Chrome :)
giorgio79

66
El navegador estándar de Kitkat, si su fabricante lo usa, es Chromium. about:debugRealmente reenvía a lo chrome://debugque dice "no se puede encontrar" pero muestra una Debugopción en la configuración. Algunas de las opciones no entran en vigencia hasta que se abre una nueva pestaña después.
cde


21

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


Se agregó una guía paso a paso para weinr en OS X en stackoverflow.com/questions/13330221/…
leymannx

Ya probé Weinre y no estaba muy satisfecho con la herramienta. El registro no es realmente confiable. Algunos errores no se muestran. Incluso si se muestran, Weinre solo muestra el mensaje de error, sin el seguimiento de la pila. Eso me molestó por completo.
Lewis

Ya probé Weinre y no estaba muy satisfecho con la herramienta. El registro no es realmente confiable. Algunos errores no se muestran. Incluso si se muestran, Weinre solo muestra el mensaje de error, sin el seguimiento de la pila. Eso me molestó por completo.
Lewis

17

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.


¿Por qué se rechazó esto? Es una de las únicas herramientas que admite la depuración remota de webViews dentro de aplicaciones nativas.
Alfie Hanssen

Debido a que no dice cómo hacerlo, excepto que lo señala a un enlace de todo el proyecto, por lo que debe cavarlo mucho antes de tener éxito
Adaptabi

2
Esta herramienta es bastante buena y resolvió mi problema. Lástima que tuve que buscar en Google en lugar de ver esta respuesta ya que alguien decidió enterrarla. (Terminé aquí primero) Agregaré algunos detalles para mejorar esta respuesta, ¿ve cómo funciona todo esto?
Aardvark

jsHybugger APK ya no está disponible en Google Play ni para descargar. El proyecto se almacena aquí: github.com/dcendents/jsHybugger ; pero parece no incluir el código para generar el APK.
Adrian Herscu

14

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.


Gracias Ludvig, descubrí esto no mucho después de la publicación original, pero buen seguimiento.
jvenema

Esta no es una respuesta a la pregunta principal, por favor haga esto en un comentario (o una pregunta separada) y elimínelo.
PJ Brunet

12

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.


5

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.


5

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)

5

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


66
Sí, pero no hay nada para la consola
Nico

3

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>

Esto es genial para depurar javascript en dispositivos móviles. Gracias
ako

3

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


No sé por qué esta respuesta no ha recibido más reconocimiento. Fue increíblemente simple y funciona para emulador y dispositivo físico
Frank

3

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)


1

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 adjuntaingrese la descripción de la imagen aquí


0

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 .


0

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/ "


0

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)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.