Validando en iOS con herramientas de desarrollador de Safari

Cuando trabajamos con aplicaciones móviles híbridas o con sitios web con características diferentes en su versión móvil frente a desktop, en muchas ocasiones nos enfrentamos a la necesidad de realizar una depuración de lo que ocurre en el dispositivo, tanto para validar que los códigos de medición que están desplegados están funcionando según esperamos como para detectar posibles problemas o conflictos con nuestra aplicación o sitio web.

Al igual que ocurre en el caso del sistema operativo Android, donde el navegador Chrome nos permite realizar un remote debugging del dispositivo, también disponemos para iOS la funcionalidad de disponer de una herramienta de desarrolladores que nos permita realizar esta tarea a través de macOS.

En este caso, utilizaremos Safari Technology Preview como navegador, que en esencia consiste en la versión beta de Safari para desarrolladores. Podemos acceder a su descarga a través de aquí.

En primer lugar, configuraremos nuestro dispositivo iOS habilitando la inspección web Javascript.

Para ello seguiremos los siguientes pasos:

Conectamos el iPhone vía puerto USB al Mac.
Nos dirigimos hacia la sección Ajustes -> Safari -> Avanzado y nos aseguramos de que la opción “Inspector web” esté habilitada:

Posteriormente, restableceremos nuestra configuración de localización y privacidad del dispositivo iOS a través de Ajustes -> General -> Transferir o restablecer el iPhone -> Restablecer -> Restablecer localización y privacidad:

Una vez realizadas las configuraciones en el dispositivo, cargamos en el navegador del mismo la url del site o lanzaremos la app que queremos inspeccionar.

Abrimos el navegador Safari Technology Preview, y nos dirigimos a la opción Desarrollo del menú superior, donde aparecerá el dispositivo que tenemos conectado vía USB y nos aseguramos de tener activada la opción de apertura automática del inspector web: