Cómo usar Inspect: depura Safari en iPhone sin tener un Mac lleno de cables

Qué es Inspect y qué problema resuelve

Tienes un bug que un usuario reporta solo en su iPhone. En el navegador de tu ordenador no se reproduce, y Safari en iOS no trae unas herramientas de desarrollo como las que sí tiene Chrome en tu escritorio — así que no puedes abrir la consola y mirar qué está pasando. Ese es el hueco que llena Inspect: te da acceso real a un iPhone, a un Android o a un simulador de iOS, con una interfaz de inspección calcada de Chrome DevTools, para depurar Safari, Chrome en Android y WebViews dentro de apps nativas.

La otra mitad de Inspect está pensada para no usarla tú directamente: es una CLI (línea de comandos) construida para que un agente de código —la propia herramienta nombra a Claude, Codex y Cursor— pueda inspeccionar el DOM, leer la consola y la red, corregir el CSS y volver a comprobar el resultado sin que tengas que ir tú mismo mirando la pantalla del móvil.

Existe como aplicación de escritorio (macOS y Windows con soporte completo, Linux de forma experimental) y como paquete de línea de comandos, `@inspectdotdev/cli`.

Para quién tiene sentido

• Para ti, si desarrollas para web móvil o apps con WebViews y necesitas reproducir un bug que solo pasa en un dispositivo real, no en el emulador de tu navegador de escritorio.
• Para tu equipo, si ya trabajáis con un agente de código (Claude Code, Cursor) y queréis que pueda depurar la parte móvil por sí mismo en vez de describirle el bug a mano cada vez.
• Menos indicado si solo necesitas depurar la versión de escritorio de tu web — para eso ya tienes Chrome DevTools sin instalar nada más.

Cómo empezar

1. 1. Para uso manual: instala la app de escritorio

   Regístrate en inspect.dev, descárgala desde inspect.dev/download, y sigue el emparejamiento guiado con tu dispositivo desde la propia app.

2. 2. Para un agente de código: instala la CLI

   npm install -g @inspectdotdev/cli@latest — y comprueba que ha quedado bien con inspect --version o inspect status --json.

3. 3. En Android, activa la depuración USB

   Inspect usa adb para hablar con el dispositivo Android, así que adb tiene que estar instalado y en tu $PATH, con la depuración USB activada en el teléfono.

4. 4. En iOS, conecta el dispositivo o abre el Simulador

   Puedes usar un iPhone real conectado (o por WiFi) o el Simulador de iOS si tienes macOS con Xcode instalado.

Tu primer caso de uso: depurar Safari en un iPhone real por USB

Situación: te reportan que un botón no responde, pero solo en iPhone. Qué hace Inspect: conecta el dispositivo, abre la página en Safari desde la propia app o la CLI, y te da consola, red, inspección de DOM/CSS y capturas de pantalla — como si fuera Chrome DevTools, pero apuntando al Safari real del iPhone. Resultado esperado: ves el mismo error que ve el usuario, en el mismo Safari, en el mismo dispositivo, en vez de intentar adivinarlo desde tu ordenador. Advertencia: puedes editar el CSS en vivo para probar un arreglo, pero no el JavaScript — Safari en iOS no lo permite, así que un cambio de lógica hay que probarlo recargando la página.

Caso de uso: que tu agente de código depure solo

Situación: le pides a Claude Code o Cursor que arregle un bug de layout que solo se ve en Android. Qué hace Inspect: le da a tu agente una CLI tipada con JSON estructurado para abrir la página, tomar una foto del estado (snapshot), leer consola y red, corregir el CSS y recargar para comprobar el resultado — sin que tú tengas que mirar el móvil en ningún momento. Resultado esperado: el agente repite ese ciclo (abrir → comprobar → corregir → recargar → capturar) tantas veces como haga falta y te enseña la captura final ya corregida. Advertencia: si tu backend corre en tu ordenador (localhost), el iPhone no puede alcanzarlo directamente — hace falta una URL pública o un túnel como ngrok, porque iOS no soporta reenviar el puerto como sí hace Android.

Usa Inspect para depurar el layout roto de la pantalla de checkout en Android. Contexto: el botón "Pagar" queda cortado por el teclado cuando el campo de tarjeta tiene el foco. Abre la página en un dispositivo Android real, revisa consola y red, identifica la causa en el CSS, corrígela, recarga y enséñame una captura del resultado ya arreglado. No toques el JavaScript de validación del formulario, solo el layout.

Caso de uso: inspeccionar componentes React en el móvil

Situación: un componente React se renderiza distinto en el móvil y no sabes qué props está recibiendo ahí. Qué hace Inspect: si la app usa React, muestra automáticamente el árbol de componentes, sus props y su state, con búsqueda y resaltado de renders — la misma información que tendrías en React DevTools, pero sobre el dispositivo real. Resultado esperado: localizas la prop o el state que está mal en cuanto lo comparas con lo que esperabas. Advertencia: esta función se añadió en enero de 2026 — si usas una versión antigua de Inspect, puede que no aparezca hasta actualizar.

Caso de uso: depurar un servidor que solo corre en tu ordenador

Situación: estás desarrollando en local y quieres probar los cambios directamente en tu iPhone antes de hacer deploy. Qué hace Inspect: te deja apuntar el dispositivo a tu servidor local a través de una URL HTTPS pública o de un túnel tipo ngrok. Resultado esperado: pruebas la versión que tienes a medio hacer, en el dispositivo real, sin necesidad de desplegarla antes. Advertencia: en Android sí existe reenvío de puerto directo; en iOS no, así que necesitas sí o sí el túnel — no hay atajo.

Caso de uso: depurar un WebView dentro de una app nativa

Situación: tu app nativa muestra una pantalla web embebida (un WebView) y algo se ve mal justo ahí, no en el resto de la app. Qué hace Inspect: se conecta también a WebViews, no solo al navegador completo, tanto en iOS (incluyendo UIWebView) como en Android (incluyendo Crosswalk). Resultado esperado: puedes inspeccionar esa pantalla embebida exactamente igual que si fuera una pestaña normal de Safari o Chrome. Advertencia: las mismas limitaciones de JavaScript en vivo en iOS aplican aquí — solo puedes editar CSS sobre la marcha.

Ejemplo práctico completo: de bug reportado a captura corregida

1. 1. Reproduces el reporte

   Un usuario dice que en su iPhone el menú no se cierra al tocar fuera. Conectas tu iPhone de pruebas por USB y abres la página con Inspect.

2. 2. Tomas un snapshot y miras la consola

   Ves un error de JavaScript real al tocar fuera del menú: intenta acceder a una propiedad de un elemento que ya no existe en el DOM en Safari (aunque sí existía en Chrome).

3. 3. Confirmas la causa con el inspector de DOM

   El elemento se elimina antes de que el listener de 'click fuera' termine de ejecutarse — una diferencia real de comportamiento entre motores, no un fallo de tu lógica en general.

4. 4. Corriges el JavaScript en tu editor (no en Inspect) y recargas

   Como Inspect no permite editar JS en vivo en iOS, haces el cambio en tu código normal, recargas la página en el dispositivo desde la propia app.

5. 5. Verificas con una captura

   Tocas fuera del menú de nuevo, compruebas en la consola que ya no hay error, y guardas una captura de pantalla del resultado correcto para adjuntar al ticket.

Qué hacer cuando algo falla

• El dispositivo Android no aparece: revisa que adb esté instalado y en tu $PATH, y que la depuración USB esté activada en el teléfono — es el requisito más habitual que se pasa por alto.
• No puedes acceder a tu servidor local desde el iPhone: es esperado, no un fallo — iOS no soporta reenvío de puerto, así que necesitas una URL pública o un túnel (ngrok u otro).
• Un cambio de JavaScript no se refleja: Inspect no edita JS en vivo en iOS (solo CSS) — tienes que cambiar el código y recargar la página.
• No puedes forzar un tamaño de pantalla distinto en iOS: WebKit no permite ese tipo de override en plataformas Apple, a diferencia de Chrome DevTools en escritorio.

Qué hace bien

• Te da la consola, la red y el inspector de DOM/CSS de un dispositivo real, algo que Safari en iOS no ofrece por sí solo.
• La CLI está pensada de verdad para que un agente de código la use de forma autónoma — JSON estructurado, no una interfaz pensada solo para humanos.
• Cubre iOS y Android con la misma herramienta, incluyendo WebViews dentro de apps nativas, no solo el navegador.
• El plan gratuito no pide tarjeta ni registro para las dos sesiones diarias de 15 minutos.

Qué no hace bien (o no hace)

• No edita JavaScript en vivo en iOS — Safari no expone lo necesario para eso, así que cualquier cambio de lógica exige recargar.
• No puede simular un viewport distinto en iOS ni limitar la velocidad de red desde la propia herramienta.
• No depura SharedWorkers en iOS.
• No tiene un MCP propio para depuración en vivo — para eso se combina con el paquete de terceros chrome-devtools-mcp, no es una función nativa de Inspect.

Alternativas

La propia documentación de Inspect reconoce dos proyectos previos como base de la idea: ios-webkit-debug-proxy, que da la conexión en bruto al protocolo de depuración remota de WebKit sin traducirlo a Chrome DevTools ni ofrecer una app integrada, y remotedebug-ios-webkit-adapter, un adaptador de código abierto para depurar Safari/WebViews desde VS Code, Chrome DevTools u otras herramientas compatibles. Ambos son más técnicos de montar y no incluyen la capa pensada para agentes de código que sí trae Inspect.

Planes y precios

Confirma el precio vigente en inspect.dev/pricing antes de suscribirte: