Elements: inspecciona y edita en vivo
El árbol DOM vivo de la página con estilos calculados, herencia y modelo de caja. Cambia un valor y el dispositivo repinta al momento: la vía más rápida para cazar un fallo de maquetación móvil.
Depura las páginas web del móvil desde el ordenador
Como pulsar F12 en tu propio navegador, pero sobre las páginas abiertas en un iPhone o un Android real: pestañas del navegador o el WebView / H5 incrustado en una app. Inspeccionar elementos, errores de consola, puntos de interrupción, peticiones de red, cookies y almacenamiento local.
- Peticiones del WebView de la app
- Peticiones del navegador móvil
- Pantalla del móvil al lado
- Sin recompilar la app
Depuración web móvil, sin el rodeo de siempre
Todo lo de abajo es el día a día depurando una página en el móvil. La columna izquierda es cómo suele hacerse.
| Lo que quieres hacer | La forma habitual | Con el inspector web |
|---|---|---|
| La maquetación solo se rompe en el móvil | Adivinar el arreglo, recompilar, desplegar y volver a mirar | Editar el elemento y su CSS en vivo y ver cómo el dispositivo se actualiza al instante |
| Pantalla en blanco o un botón que no hace nada | En el móvil no hay consola, así que se llenan de alerts y logs | Los errores y logs tal cual los lanzó la página |
| Averiguar qué línea de JavaScript lanzó una petición | La captura enseña la petición, nunca a quien la llamó | Puntos de interrupción y ejecución paso a paso en Sources, con las variables delante |
| Ver qué hay realmente en las cookies y en localStorage | Deducirlo de las cabeceras de la petición | Tablas completas —nombre, valor, dominio, caducidad, Secure, HttpOnly, SameSite— y editables |
| Depurar una página H5 incrustada en una app | Enterrada en el tráfico y sin forma de engancharse a ella | Listada bajo la app que la contiene: la eliges y la depuras como cualquier página |
| Simplemente conseguir que funcione la depuración remota | Ajustes distintos por plataforma, accesos escondidos y pasos tediosos | Un solo diálogo: elige dispositivo, elige página y pulsa Depurar |
| Leer a la vez el tráfico y el estado de la página | Una herramienta de captura y un depurador, en paralelo y sin relación | Ambos en la misma herramienta: la petición descifrada y el código que la envió |
Herramientas de desarrollo de verdad, apuntando al dispositivo
No es un visor recortado: los mismos paneles que usas en el escritorio, conectados a la página que corre en el móvil.
Console: errores y REPL en vivo
Todos los errores y logs que produjo la página, más un prompt que ejecuta tu JavaScript dentro de esa página y en ese dispositivo. Se acabó depurar a base de alert().
Sources: puntos de interrupción y paso a paso
Recorre los scripts y hojas de estilo cargados, pon puntos de interrupción, sube por la pila de llamadas e inspecciona las variables justo cuando algo falla.
Network: cada petición, en cascada
Estado, tipo, origen, tamaño, tiempos y caché de cada petición, con los totales de peticiones, bytes transferidos, DOMContentLoaded y tiempo de carga completo.
Storage: cookies, local y sesión
Cookies agrupadas por dominio con caducidad, Secure, HttpOnly y SameSite, junto a localStorage y sessionStorage: lo más rápido para desenredar un problema de sesión.
La pantalla del dispositivo en la tuya
En Android la página en vivo se refleja junto a los paneles y puedes pulsar y desplazarte con el ratón: inspeccionar y manejar en una sola pantalla, sin ir del móvil al teclado.
Qué aspecto tiene
Sesiones reales contra un móvil real, nada preparado.
Qué puedes depurar
Móviles, tablets, emuladores y simuladores, y también un navegador de tu propio equipo.
| Este equipo | 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 | ✓ | ✓ | ✓ |
La preparación, que se hace 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 y deja el dispositivo desbloqueado. Para Safari activa Ajustes → Safari → Avanzado → Inspector web; para Chrome, Ajustes de Chrome → Ajustes de contenido → Inspector web.
Dispositivo Android
Conecta el cable y activa la depuración USB en las opciones de desarrollador. Los emuladores 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.
¿También una página dentro de una app? Una cosa más
Sáltatelo si solo necesitas pestañas del navegador. Tu propia app: en Android llama una vez a setWebContentsDebuggingEnabled(true); desde iOS 16.4, pon isInspectable = true en la WKWebView. App ajena, o sin tocar el código: marca «Incluir también las páginas dentro de apps» y las páginas de las apps abiertas aparecen en la lista — hace falta un Android rooteado, y en iOS solo funciona con apps firmadas para desarrollo.
Hecho eso, cada sesión se reduce a esto
Nueva captura → objetivo (Este ordenador / iOS / Android) → método «Inspector web» → Actualizar → elige la página → Inspect. Se abren herramientas de desarrollo completas en tu navegador; puedes abrir tantas como quieras a la vez.
También las páginas escondidas dentro de las apps
Casi todas las apps son mitad nativas, mitad web. En esas páginas H5 incrustadas viven los fallos más incómodos, y ahí es donde las herramientas normales no te dan nada.
Agrupadas por la app que las contiene
La lista de páginas está organizada por app, así distingues de un vistazo la pantalla de pago dentro de la app de una pestaña del navegador y te enganchas justo a la que quieres.
Una sola casilla
«Incluir también páginas dentro de apps» añade a la lista las páginas de las apps abiertas en ese momento. Desmárcala y vuelves a ver solo pestañas del navegador.
Sin dejar rastro
No recompilas la app, no firmas nada ni instalas un ayudante en el dispositivo. Al terminar la sesión, el dispositivo vuelve a como estaba.
Combina con la captura de tráfico
Depura la página aquí y captura el tráfico de esa misma app en la misma herramienta: HTTPS descifrado, incluso en apps con certificado fijado o que ignoran el proxy del sistema.
Depuración web móvil: preguntas frecuentes
¿Cómo inspecciono un elemento en el móvil?
Conecta el móvil al ordenador por USB, abre Trace Eagle, elige Nueva captura → iOS o Android → método «Inspector web», selecciona la página y pulsa Depurar. En el ordenador se abre un panel Elements completo con el DOM y el CSS en vivo de la página del dispositivo; si cambias un valor ahí, la página del móvil cambia al instante.
¿Puedo depurar una WebView de Android sin modificar la app?
Sí. Las WebView que ya permiten depuración salen directamente en la lista. Para las apps que no las exponen, marca «Incluir también páginas dentro de apps» y se añaden las páginas de las apps abiertas: eso requiere un dispositivo con root, y no se recompila, ni se reempaqueta, ni se instala nada de forma permanente.
¿Cómo depuro una página web en un iPhone o iPad?
Conecta el dispositivo, desbloquéalo y activa Ajustes → Safari → Avanzado → Inspector web (o Ajustes de Chrome → Configuración de contenido → Inspector web). Después elige dispositivo y página en Trace Eagle y pulsa Depurar: el inspector web completo se abre en el navegador de tu ordenador, con Elements, Console, Sources, Network, Storage, Layers y más.
¿Es lo mismo que chrome://inspect?
Cubre lo mismo y algo más, en un único diálogo. La página de depuración remota del navegador solo maneja objetivos Chromium en Android; aquí iOS, Android y tu navegador local están en el mismo selector, las páginas se agrupan por app, las H5 incrustadas se añaden con una casilla y todo convive con una herramienta de captura que descifra el tráfico HTTPS de esa misma app.
¿Hace falta jailbreak o root?
No para la depuración normal: las pestañas del navegador y las apps que ya lo permiten funcionan en un dispositivo de fábrica. Solo la opción adicional que añade páginas de apps de terceros necesita un Android con root; en iOS es el sistema el que limita qué apps se pueden incluir.
¿Necesita certificado, proxy o un SDK en la app?
Ninguna de las tres cosas. La depuración web remota va por la conexión USB: no hay proxy que configurar, ni certificado raíz que instalar en el dispositivo, ni SDK o biblioteca que añadir a la app.
¿En qué se diferencia de la captura de tráfico?
La captura responde a qué viajó por la red: la petición, la respuesta, cabeceras y cuerpo, descifrados. El inspector web responde a qué hizo la página: el DOM, los estilos, los errores de consola, qué script lanzó la petición y qué había ya en las cookies y el almacenamiento. Trace Eagle trae las dos cosas, así que pasas de una a otra sin cambiar de herramienta.
¿Con qué navegador se abre la ventana de depuración?
Las sesiones de Android y del navegador local se abren en Chrome, Edge o Brave (Trace Eagle lanza uno por ti); las de iOS funcionan en cualquier navegador.
¿Funciona con emuladores y simuladores?
Sí. Los emuladores de Android suelen detectarse sin cable, y los simuladores de iOS que corren en el equipo también: el flujo es idéntico al de un dispositivo físico.
¿El inspector web es gratis?
Sí. Como todo lo demás en Trace Eagle, es completamente gratis en macOS, Windows y Linux, sin funciones de pago.