Normalmente podemos usar las herramientas de desarrollador del navegador en la computadora de escritorio usando F12 o con “Inspeccionar elemento” para revisar los errores y depurar nuestras aplicaciones web, pero cuando queremos hacerlo en móviles es un poco más complejo.
En este artículo te mostraré cómo usar las herramientas de desarrollador del navegador web en móviles, es decir, teléfonos o tabletas.
Herramientas de desarrollador en teléfono
Para hacer esto vamos a necesitar el móvil donde queremos revisar la consola de JavaScript pero también una computadora. Al menos yo lo he probado con Google Chrome en ambos dispositivos.
Los pasos son:
- Habilitar las herramientas del desarrollador en el teléfono Android y activar también la depuración por USB
- Ir a
chrome://inspecten la barra de navegación - Conectar el dispositivo, permitir la depuración USB y dar los permisos si Chrome los solicita
- Abrir el navegador Chrome en el teléfono y la página web que queremos depurar
Un tiempo después podremos ver los dispositivos disponibles así como las pestañas abiertas. Podemos elegir cualquiera de ellas y dar clic en “Inspect” para revisar la web.
Inmediatamente después tendremos una vista en vivo de la página en donde podremos interactuar y usar todas las herramientas a nuestro alcance. Podemos revisar los errores de la consola, inspeccionar la red, cambiar los estilos y todo lo que podríamos hacer en la computadora pero ahora en nuestro móvil.
Nota: en la imagen estoy usando el ejemplo de leer un código de barras con JS, por ello es que se ve la cámara de mi teléfono.
Por cierto, acabo de subir un tutorial sobre cómo usar la consola de depuración y también un vídeo explicando cómo usarlo en teléfonos.
Mira cómo usar la consola de depuración para encontrar errores en tu aplicación web:
Y aquí un video explicando cómo depurar JavaScript en móviles con Android:
