Cómo depurar una web React en un móvil usando Chrome DevTools desde un ordenador

Tiempo de lectura: 2 minutos

Hoy vamos a ver cómo podemos depurar una web en un móvil usando Chrome DevTools desde un ordenador.

Prepara tu entorno

• PC/portátil con Google Chrome instalado.
• Móvil Android con Google Chrome instalado.
• El móvil y el PC deben estar conectados por cable USB y/o estar en la misma red WiFi (para conexiones vía remoto).
• Habilita Opciones de desarrollador y Depuración USB en el móvil.

Habilitar Opciones de desarrollador y depuración USB en Android

• En tu móvil ve a Ajustes > Acerca del teléfono.
• Busca Número de compilación (Build number).
• Toca repetidamente (7 veces) hasta que aparezca el mensaje “Eres desarrollador”.
• Ahora vuelve a Ajustes y entra en Opciones de desarrollador.
• Activa Depuración USB.

Conecta el móvil al PC vía USB

• Usa un cable USB para conectar tu móvil al PC.
• En el móvil aparecerá un popup para autorizar la depuración USB con ese PC, acepta.

Abre tu web React en el móvil

• En tu móvil abre Google Chrome.
• Navega a la URL local de tu proyecto React que quieres depurar, por ejemplo:
  • http://localhost:3000 (si estás corriendo React localmente)
  • O la IP de tu PC en la red local, ej: http://192.168.1.10:3000

Nota: Si usas localhost en móvil no funcionará, usa la IP local del PC.

Abre Chrome DevTools en tu PC para depurar el móvil

• En tu PC abre Chrome.
• En la barra de direcciones escribe:

chrome://inspect

Aparecerá la sección Remote Target y debería detectar tu móvil con Chrome abierto.

Debajo aparecerá la pestaña con la URL que abriste en el móvil.

Haz clic en Inspect para abrir las DevTools apuntando a esa página móvil.

Usa DevTools para depurar React en móvil

• Ahora puedes usar las DevTools clásicas:
  • Inspector de elementos
  • Consola JS
  • Network (red)
  • Performance (rendimiento)
  • React Developer Tools (si lo tienes instalado) funciona igual

Consejos para React

• Instala la extensión React Developer Tools en tu Chrome de PC para ver la jerarquía de componentes React.
• Usa console.log() normalmente y verás la salida en la consola DevTools.
• Para CSS y layout, inspecciona elementos y modifica estilos en tiempo real.

Extra: Si quieres depurar remotamente vía WiFi (sin USB)

Requiere un poco más de configuración, aquí un resumen:

• Conecta móvil y PC a la misma red WiFi.

• En el móvil, abre Chrome y activa las opciones remotas (no siempre disponible).

• En el PC abre chrome://inspect/#devices.

• Configura el puerto y la IP del móvil para hacer conexión remota.

(Esto es más avanzado, te recomiendo empezar con USB)

Otra opción es usar depuración remota adb por wifi:

La depuración remota vía WiFi es posible, pero más compleja. Requiere usar adb y conectar tu móvil al puerto 9222:

adb tcpip 5555
adb connect <IP-del-móvil>

Después podrías ir a chrome://inspect y depurar vía IP, pero no es lo recomendado si solo quieres ver tu React web desde el móvil.

Recuerda activar la depuración remota desde ajustes de desarrollador en tu móvil.