Depuración de localhost en Android: reenvío de puertos, controladores ADB y la ventana RSA que no aparece

Un botón que se superpone en el navegador móvil, una aplicación Spring Boot tras una estricta barrera OAuth y un ordenador con Windows que no reconoce el smartphone. Lo que parece una pequeña corrección de CSS se convierte rápidamente en una odisea de depuración. Un análisis en profundidad para desarrolladores web que se enfrentan al reenvío de puertos de Chrome, controladores ADB defectuosos y ventanas de depuración USB que se niegan a aparecer.

Como desarrollador web, seguro que conoces este fenómeno: la aplicación web se ve de maravilla en el navegador del monitor de escritorio. Tampoco aparecen errores en la vista móvil de Chrome DevTools. Sin embargo, al abrir la página en un smartphone Android real, por ejemplo en Edge o Chrome, algunos elementos importantes de la interfaz desaparecen de repente o los botones se superponen.

El problema: errores de CSS, Edge móvil y la trampa de OAuth

A menudo, el culpable se identifica enseguida: la propiedad CSS height: 100vh. Los navegadores móviles, especialmente aquellos con una barra de direcciones en la parte inferior, como Edge para móviles, suelen calcular este valor a partir de la altura máxima de la pantalla. Al hacerlo, ignoran la barra de menú dinámica que aparece y desaparece al desplazarse. Como consecuencia, el diseño sobresale por debajo del área visible.

Hoy en día, la solución suele ser trivial: utilizar height: 100dvh (Dynamic Viewport Height), que tiene en cuenta correctamente estas barras.

Pero ¿cómo pruebas esta corrección en local si la aplicación es más compleja?

Por qué Cloudflare Tunnel suele fallar con OAuth

Muchos desarrolladores recurren a servicios como Cloudflare Quick Tunnels (trycloudflare.com) para realizar pruebas móviles temporales. El problema es que generan un subdominio nuevo y aleatorio cada vez que se inician.

Si tu aplicación, por ejemplo un backend de Spring Boot, está protegida por un inicio de sesión OAuth2 (Google, GitHub, Auth0), el proveedor exige una URI de redirección registrada de forma estricta. Una URL aleatoria de Cloudflare provoca un error «Redirect URI mismatch». Desactivar temporalmente la seguridad en el código tampoco suele ser posible cuando datos importantes de la aplicación, como los roles de usuario, se cargan directamente desde el perfil OAuth autenticado.

La solución más elegante es el reenvío de puertos de Chrome mediante depuración USB. El smartphone canaliza sus solicitudes a través del cable USB hacia el localhost del ordenador de desarrollo. El proveedor OAuth sigue viendo la redirección limpia y permitida a localhost:8080.

Sin embargo, en Windows el camino hasta conseguirlo suele estar lleno de obstáculos.

Obstáculo 1: el Administrador de dispositivos de Windows y el vacío de controladores

El primer paso lógico consiste en acceder a las opciones para desarrolladores del dispositivo Android, activar la depuración USB y conectar el teléfono al ordenador mediante un cable. Pero en Chrome DevTools, bajo chrome://inspect/#devices, no aparece absolutamente nada.

Una mirada al Administrador de dispositivos de Windows suele revelar el problema: el smartphone se reconoce como dispositivo de almacenamiento MTP, pero la interfaz de depuración no aparece o está marcada con un signo de exclamación amarillo («ADB Interface»). A Windows sencillamente le faltan los controladores adecuados para la depuración de Android.

Instalar los controladores ADB como administrador

Para instalar correctamente el controlador en todo el sistema, es imprescindible iniciar el Administrador de dispositivos con permisos de administrador; de lo contrario, Windows rechaza la asignación manual del controlador.

1. Abre la línea de comandos como administrador: Pulsa la tecla Windows, escribe cmd, haz clic con el botón derecho en «Símbolo del sistema» y selecciona «Ejecutar como administrador».
2. Inicia el Administrador de dispositivos: Escribe el comando devmgmt.msc y pulsa Intro.
3. Descarga e instala el controlador: Descarga el controlador USB de Google oficial y extrae el archivo ZIP.
4. En el Administrador de dispositivos, haz clic con el botón derecho en el «Dispositivo desconocido» con el signo de exclamación, selecciona Actualizar controlador, después Buscar controladores en mi equipo y elige la carpeta que has extraído.

Tras instalarlo correctamente, el dispositivo debería aparecer como «Android Composite ADB Interface» sin advertencias.

Obstáculo 2: «Sin conexión» o por qué no aparece la ventana de depuración USB

Los controladores están instalados y el teléfono está conectado, pero Chrome sigue mostrando el dispositivo como Sin conexión en chrome://inspect. El añadido fatal: «Autenticación pendiente: acepta la sesión de depuración en el dispositivo.»

En ese momento debería aparecer en el smartphone la denominada ventana RSA: «¿Permitir depuración USB? La huella digital de la clave RSA del ordenador es…» Sin esta confirmación criptográfica, Android bloquea tajantemente el acceso del ordenador. Sin embargo, en la pantalla no aparece nada. Ni siquiera restablecer las autorizaciones de depuración o cambiar a otro smartphone soluciona el problema.

El conflicto entre Chrome y el daemon ADB

La respuesta está en la arquitectura de Chrome. El navegador incorpora su propio mecanismo integrado de detección USB. Este depende de la comunicación en segundo plano con el daemon ADB (adb.exe, Android Debug Bridge). Pero si este servicio en segundo plano no se está ejecutando en el ordenador, se ha bloqueado o Chrome no tiene permisos para activarlo correctamente, el handshake RSA necesario nunca se envía por el puerto USB.

El smartphone espera una solicitud de autorización que el ordenador nunca envía.

La solución: forzar manualmente el handshake de ADB

Cuando Chrome falla, debes inicializar manualmente la conexión de hardware desde la línea de comandos. Para ello necesitas las herramientas oficiales básicas de Google.

Guía paso a paso para solucionar el problema

1. Descarga Platform-Tools: Descarga las Android Platform-Tools. No requieren instalación. Solo tienes que extraer el archivo ZIP en una carpeta, por ejemplo en el escritorio.
2. Comprueba el modo MTP del smartphone (¡importante!): Por motivos de seguridad, como la protección frente al «juice jacking» en estaciones de carga públicas, las versiones modernas de Android bloquean las líneas de datos cuando el dispositivo está configurado como «Solo carga». En los ajustes USB del teléfono, selecciona obligatoriamente «Transferencia de archivos» (MTP).
3. Inicia ADB manualmente: Abre el Explorador de archivos de Windows en la carpeta donde hayas extraído las Platform-Tools. Haz clic en la barra de direcciones de la parte superior, escribe cmd y pulsa Intro. El terminal se abrirá exactamente en ese directorio.
4. El comando decisivo: Escribe el siguiente comando y pulsa Intro:

adb devices

Qué sucede en segundo plano: El sistema detecta ahora: * daemon not running; starting now at tcp:5037. El daemon ADB se inicia de forma forzada y analiza activamente los puertos USB. Utiliza el controlador de Windows que acabas de reparar e inicia el handshake RSA con el smartphone.

El resultado: Justo en el instante en que ejecutas el comando, aparece en la pantalla del smartphone la esperada ventana «¿Permitir depuración USB?».

El paso final: activar y probar el reenvío de puertos

Una vez que confirmes la ventana del teléfono con «Permitir siempre desde este ordenador», la configuración estará completa:

1. Vuelve a chrome://inspect/#devices en Chrome. El mensaje «Sin conexión» habrá desaparecido y el dispositivo aparecerá como activo.
2. Junto al dispositivo, haz clic en «Reenvío de puertos…».
3. Introduce 8080, o el puerto de tu aplicación Spring Boot, como puerto.
4. Introduce localhost:8080 como dirección de destino.
5. Marca la casilla «Habilitar reenvío de puertos» y confirma.

Ahora abre Edge o Chrome en el smartphone y escribe http://localhost:8080 en la barra de direcciones. El tráfico se dirige de forma segura a través del cable USB hacia tu ordenador. La aplicación se carga, la redirección OAuth a localhost funciona perfectamente, los roles se cargan correctamente desde la base de datos y por fin puedes dedicarte a corregir el error CSS inicial.

Conclusión: Cuando tecnologías web como OAuth y CSS se encuentran con interfaces de hardware como ADB y protocolos USB, los errores suelen ser difíciles de interpretar. Una ventana RSA que no aparece rara vez indica que el smartphone esté averiado; normalmente se debe a un daemon ADB silenciado. Tener a mano el comando adb devices y saber iniciar el Administrador de dispositivos de Windows como administrador te ahorrará horas de búsqueda infructuosa.