Inspector web

Un diseño que solo se rompe en el móvil, un botón que no responde, una página H5 que se queda en blanco — en el ordenador, pulsas F12 y ves por qué al instante. En el móvil, casi siempre toca añadir alert, recompilar y volver a mirar. El inspector web conecta esas mismas herramientas de desarrollo a la página real del dispositivo: enchufa el cable y Elements, Console, Sources, Network y Storage aparecen en tu ordenador, con el dispositivo redibujándose en cuanto cambias un valor.

---

1. Cómo se reparte el trabajo con la captura de paquetes

Necesitas los dos, pero responden preguntas distintas:

	Captura de paquetes	Inspector web
Responde	Qué pasó por la red	Qué hizo la página
Muestra	Peticiones / respuestas, cabeceras, cuerpo (descifrado)	Árbol DOM, estilos calculados, errores de consola, pilas de llamadas, cookies y almacenamiento
Pregunta típica	Qué devuelve este endpoint, si los parámetros son correctos	Qué línea de JavaScript envió esta petición, por qué no se aplica un estilo

La captura muestra la petición, pero nunca quién la disparó; el inspector pone un punto de interrupción en Sources y te lleva hasta esa línea. Los dos viven en la misma herramienta, así que moverte entre ellos no cuesta nada.

---

2. Preparación de una sola vez

Los tres bloques de abajo son alternativas: haz el que corresponda a tu objetivo, y solo una vez.

Dispositivo iOS

Conecta el cable, deja el dispositivo desbloqueado, y activa el interruptor del inspector web:

• Safari: Ajustes → Safari → Avanzado → Inspector web
• Chrome: Ajustes de Chrome → Ajustes de contenido → Inspector web

Es el paso que más se olvida en iOS. Sin él, el dispositivo se detecta pero la lista de páginas queda vacía.

Dispositivo Android

Conecta el cable y activa la depuración USB en las opciones de desarrollador. Los emuladores de Android suelen detectarse sin cable.

Navegador de este ordenador

Arranca Chrome o Edge con --remote-debugging-port=9222 y pulsa Actualizar en la lista de páginas.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

---

3. ¿También una página dentro de una app? Una cosa más

Si solo necesitas pestañas del navegador, puedes saltarte esta sección.

Tu propia app: actívalo una vez en el código.

// Android: llamar una vez al arrancar Application o Activity
WebView.setWebContentsDebuggingEnabled(true);

// Desde iOS 16.4: hacer inspeccionable la WKWebView
webView.isInspectable = true

App ajena, o sin tocar el código: marca «Incluir también las páginas dentro de apps» en el diálogo, y las páginas de las apps abiertas se añaden a la lista. Desmárcalo y vuelves a tener solo pestañas del navegador.

	Requisito	Nota
Android	Un dispositivo rooteado	Activa la depuración de WebView en apps en ejecución, sin recompilar nada
iOS	Solo apps firmadas para desarrollo	Límite del sistema — las apps instaladas desde la App Store no se pueden incluir

En cualquier caso, la app nunca se recompila, se firma ni se instala nada auxiliar en el dispositivo. Al terminar la sesión, el dispositivo vuelve a como estaba.

---

4. Empezar a depurar

Hecho esto, cada sesión se reduce a esto:

Nueva captura → objetivo (Este ordenador / iOS / Android) → método «Inspector web» → Actualizar → elegir la página → Inspect

• Las páginas aparecen agrupadas por la app propietaria, así que una página dentro de una app se distingue a simple vista de una pestaña del navegador.
• Al pulsar Inspect se abren herramientas de desarrollo completas en el navegador del ordenador, conectadas a esa página en ese dispositivo.
• Abre tantas como quieras a la vez: una ventana por página, todas activas en paralelo.

Qué navegador abre la ventana de depuración

Las sesiones de Android y de navegador local necesitan Chrome, Edge o Brave (Trace Eagle abre uno automáticamente); las sesiones de iOS funcionan en cualquier navegador.

---

5. Qué se puede ver

Los mismos paneles que usas cada día en el ordenador, apuntando a la página del móvil.

Panel	Qué permite
Elements	El árbol DOM en vivo de la página, con estilos calculados, herencia y el modelo de caja. Cambia un valor y el dispositivo se redibuja al instante — la forma más rápida de localizar un bug de diseño móvil
Console	Todos los errores y logs que produce la página, más un prompt que ejecuta JavaScript directamente en esa página de ese dispositivo
Sources	Explorar los scripts y hojas de estilo que carga la página, poner puntos de interrupción, seguir la pila de llamadas e inspeccionar variables justo en el momento del fallo
Network	Cada petición de la página en cascada: estado, tipo, iniciador, tamaño, tiempos y estado de caché, con totales de peticiones, bytes transferidos, DOMContentLoaded y tiempo de carga completo
Storage	Cookies agrupadas por dominio con expiración, Secure, HttpOnly y SameSite, junto a localStorage y sessionStorage — la forma más rápida de resolver un bug de estado de sesión

En Android, la pantalla del dispositivo en vivo se refleja junto a los paneles y se puede hacer clic y desplazarse con el ratón — inspeccionar y operar ocurre en una sola pantalla, sin ir alternando entre el móvil y el teclado.

---

6. Qué está soportado

	Este ordenador	iOS	Android
Pestañas del navegador	✓	✓	✓
Páginas dentro de apps (WebView / WKWebView / H5)	✓	✓	✓
Emulador / simulador	—	✓	✓
Inspeccionar y editar elementos y estilos en vivo	✓	✓	✓
Consola, puntos de interrupción y paso a paso	✓	✓	✓
Cascada de red de la página	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Pantalla del dispositivo junto a los paneles	—	—	✓
Sin certificado ni proxy que configurar	✓	✓	✓

---

7. ¿No aparece nada? Comprueba esto primero

Síntoma	Suele ser	Qué hacer
El dispositivo se detecta, la lista de páginas está vacía	El inspector web de iOS está apagado, o la pantalla bloqueada	Sigue la sección 2, actívalo, deja el dispositivo desbloqueado y pulsa Actualizar
Android no muestra páginas dentro de apps	Esa WebView nunca tuvo la depuración activada	Tu app: añade setWebContentsDebuggingEnabled(true); app ajena: marca «Incluir también las páginas dentro de apps» (necesita root)
Una app concreta de iOS nunca aparece	Un límite del sistema	Los builds de la App Store no se pueden incluir — solo las apps firmadas para desarrollo
El navegador local no lista páginas	Se inició sin el puerto de depuración	Reinicia Chrome / Edge con --remote-debugging-port=9222 y pulsa Actualizar
Inspect no hace nada	Un navegador no compatible	Las sesiones de Android y locales necesitan Chrome, Edge o Brave

---

8. Cuándo usarlo

• Un fallo que ocurre solo en el móvil: diseño, zonas táctiles, renderizado de fuentes.
• Una página H5 se queda en blanco o rota y necesitas ver errores de consola y la pila de llamadas.
• Quieres saber qué script envió una petición — la captura sola no lo dice.
• Estás siguiendo un problema de sesión o caché y necesitas ver qué hay realmente en cookies y almacenamiento.
• Estás depurando H5 incrustado en una app — las herramientas normales no dan acceso a esto.

---

Volver a Primeros pasos · Relacionado: Inspeccionar y decodificar · Captura en iOS · Captura en Android