Cómo depurar una web en un dispositivo móvil

El tráfico móvil representa una porción muy significativa del tráfico total de una web, por lo que desarrollar sitios web optimizados para móviles es una práctica necesaria para cualquiera que quiera triunfar en Internet.

Normalmente utilizamos la consola del navegador para depurar posibles errores de CSS, javascript, etc, incluso emulando un dispositivo móvil a través de la siguiente opción de Google Chrome:

El problema es que la emulación de dispositivos móviles no es tan precisa como nos gustaría y en momento puntuales puede que ocurran incidencias en un móvil que no ocurren en la versión de escritorio (incluso con la emulación móvil), por este motivo Google Chrome incorpora la depuración remota de dispositivos.

Podéis echar un vistazo al siguiente video donde explico cómo depurar aplicaciones web con Chrome en Android o continuar leyendo todos los pasos.

Requisitos para depurar web con navegador Chrome y Android

• Chrome 32 o superior.
• Controladores USB del dispositivo móvil.
• Cable USB para conectar el dispositivo al ordenador.
• Android 4.0 o superior.
• Aplicación Chrome instalada en el dispositivo móvil.

Es posible que al conectar por USB el móvil al equipo coja automáticamente el controlador. Puedes verificarlo entrando en el «Administrador de dispositivos». En caso de no instalarse automáticamente, puedes ir a https://developer.android.com/studio/run/oem-usb?hl=es, y en la parte del final encontrarás enlaces para descargar los drivers dependiendo de la marca de móvil.

Preparación de dispositivo para permitir ajustes de desarrollo

Si tienes un móvil con versión 4.0 o 4.1, simplemente puedes ir a «Ajustes/Opciones de desarrollador» y activar la opción «Depuración de USB».

Para versiones 4.2 o superior, esta opción está oculta, y debes ir previamente a «Ajustes/Acerca del móvil» y pulsar 3 veces seguidas sobre «Número de compilación». Una vez hecho esto, ya podrás ver y activar las opciones de desarrollador.

Activar la depuración remota y detección de dispositivo móvil

Para activar la detección remota hay que pulsar F12 o click derecho/inspeccionar en cualquier sitio de la pantalla. Después, pulsar en «icono de opciones/More tools/Remote devices».

En ese momento, aparecerá una nueva sección, en la cual se debe activar la depuración remota.

En este momento ya es posible conectar el móvil con el cable USB. Aparecerá un mensaje preguntando si se desea permitir la depuración por USB. Una vez se pulse en «Aceptar», ya debe detectar el dispositivo en Chrome.

IMPORTANTE: Si apareciese en el móvil un mensaje avisando de que el dispositivo está conectado como «media device», hay que pulsar encima y seleccionar conexión «Camera (PTP)» en lugar de «Media device MTP».

Ahora hay que abrir la aplicación de Chrome en el móvil, después volver al ordenador y pulsar en la pestaña con el nombre del modelo del dispositivo. Seguidamente, introducir la URL que se quiera depurar, pulsar en «Open» y por último en «Inspect».

Se abrirá una nueva ventana exactamente con lo mismo que visualizamos en el móvil, de manera que cualquier cosa que se haga en esa ventana aparecerá en el móvil y viceversa. De esta manera podemos depurar desde la consola de esta nueva ventana y podremos resolver la incidencia que tengamos.

¡Ahora ya puedes corregir todas tus incidencias visualizandolo en un dispositivo real!