¿Es posible abrir la consola de herramientas de desarrollador en Chrome en un teléfono Android?

165

Una aplicación AngularJS funciona bien en el escritorio, pero no se procesa correctamente en el móvil (se muestra el código real). Esto está en un teléfono Android.

Me gustaría ver qué errores se muestran en la consola.

¿Es posible abrir la consola JS en la aplicación de Chrome en dispositivos móviles (como en el escritorio)?

google-chrome-devtools mobile-chrome tim_xyz
fuente

Respuestas:

134

Puede hacerlo utilizando la depuración remota, aquí hay documentación oficial . Proceso básico:

  1. Conecta tu dispositivo Android
  2. Seleccione su dispositivo: Más herramientas> Inspeccionar dispositivos *desde herramientas de desarrollo en pc / mac.
  3. Autoriza en tu móvil.
  4. Feliz depuración !!

* Esto es ahora "Dispositivos remotos".

PseudoAj
fuente
2
Creo que se proporciona una explicación detallada en el enlace de documentación
PseudoAj
59
¿Es posible hacer esto sin una computadora externa?
Eric Reed
59
Pregunta pregunta por la consola de herramientas de desarrollador abierta en Chrome en el teléfono Android? Su alma requiere una máquina de depuración separada. En su respuesta, la depuración no está en el teléfono mismo
Fennekin
55
No hay otra forma en que sea consciente de @fennekin. Siéntase libre de actualizar si cree que hay una mejor manera,
PseudoAj
55
A partir de enero de 2019, no pude encontrar dispositivos de inspección en Más herramientas, finalmente lo encontré en chrome: // inspeccionar, y debes permitir la depuración de usb desde tu teléfono
Abhinav Singh
53

Cuando no tienes una PC a mano, puedes usar Eruda, que es devtools para navegadores móviles https://github.com/liriliri/eruda
Se proporciona como JavaScript incrustable y también un marcador (pegar el marcador en Chrome elimina el javascript: prefijo, por lo que debe escribirlo usted mismo)

trogper
fuente
1
¡Muy buen compañero de herramientas como Termux que hacen que el desarrollo en dispositivos móviles solos sea real! Yo ya integrados eruda-webpack-pluginen un solo proyecto: npm i eruba-webpack-plugin --save-optional.
vintproykt
Forma más fácil de lo que está en la consola
makwana.a
Impresionante solución. Está disponible en un CDN.
netishix
Esto no parece funcionar para mí. Pegarlo en la barra de direcciones (y luego leer 'javascript:') no parece hacer nada.
BT
@BT, algunos sitios web restringen la carga de scripts de dominios permitidos listados Pruébalo en otro sitio web.
trogper
10

Si solo desea ver lo que se imprimió en la consola, simplemente puede agregar la parte "impresa" en algún lugar de su HTML para que aparezca en la página web. Podrías hacerlo por ti mismo, pero hay un archivo javascript que lo hace por ti. Usted puede leer sobre ello aquí:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

El código está disponible en Github ; puedes descargarlo y pegarlo en un archivo javascipt y agregarlo a tu HTML

John Balvin Arias
fuente
FYI: Podría encontrar una situación en la que la consola NO se mostraría. Basado en una conversación al final de su página de inicio oficial , puede intentar explícitamente mobileConsole.init(). Ese truco ayuda en mi caso. YMMV.
RayLuo
1
ese enlace aún funciona, solo lleva mucho tiempo cargarlo. No obstante, puedo resumir que esas conversaciones entre mí y el propietario de la biblioteca terminaron con él agregando la siguiente información en la sección de Notas en su página principal: "Si mobileConsole no se inicia (falla la detección móvil), puede anular el inicio automático configurando overrideAutorun a true o agregue el siguiente script a su página: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo
7

Hazte un favor y simplemente presiona el botón fácil:

descargue Web Inspector (Open Source) desde Play Store.

Un AVISO: ¡ATTOW, la salida de la consola no acepta parámetros de descanso! Es decir, si tienes algo como esto:

console.log('one', 'two', 'three');

solo verás

uno

conectado a la consola. Deberá ajustar manualmente los parámetros en una matriz y unirse, de esta manera:

console.log([ 'one', 'two', 'three' ].join(' '));

para ver la salida esperada.

¡Pero la aplicación es de código abierto ! ¡Un parche puede ser inminente ! ¡El parche incluso podrías ser tú!

Sensei James
fuente
3

Kiwi Browser es Chromium móvil y permite instalar extensiones . Instale Kiwi y luego instale la extensión de Chrome "Mini JS console" (solo busque en Google e instálela desde el sitio web de extensiones de Chrome, uBlock también funciona;). Estará disponible en el menú Kiwi en la parte inferior y mostrará la salida de la consola para la página actual.

Pawel
fuente
-1

Probablemente pueda probar el Gear Browser, puede inspeccionar elementos y depurar el sitio web solo en dispositivos móviles.

https://gear4.app

Angolao
fuente
55
La aplicación es solo para iPhones. La pregunta especificaba Android.
Pete