Depuración de aplicaciones web en iPhone con Safari

Vamos a ver como depurar una aplicación web en Safari para iOS usando para ello el inspector web de Safari en MacOS.

Esta semana unos compañeros del trabajo que andaban con problemas para visualizar una aplicación web en la versión móvil de Safari me pidieron ayuda para depurar la web. Algunas veces cosas tan sencillas como depurar una web en un navegador puede convertirse en algo complicado si necesitas hacerlo dentro de un iPhone.

No es complicado pero creo que dado el ecosistema de apps en iOS ( que mayoritariamente es nativo) no es común hacer este tipo de debug por lo que aquí dejo como depurar una web en Safari para móviles con ayuda de un mac.

Para empezar hay que activar una opción para depurar en Safari en iOS, para ello vamos a Settings -> Avanzado y aqui activamos Inspector Web.

A continuación conectamos el telefono al mac por cable y abrimos la aplicación de Safari en MacOS.

En la aplicación de Safari para escritorio tenemos que ir a Preferencias y luego activar la opción Mostrar menú de desarrollo en la barra de menú.

Ahora podemos abrir nuestra aplicación web en Safari en iPhone y desde Safari en MacOS accedemos al menú de Desarrollo, aquí ya veremos nuestro iPhone y en el desplegable la web que tenemos en el movíl.

La pantalla que aparece a continuación es el inspector web de Safari conectado a nuestro iPhone.

Y desde aquí empieza el verdadero trabajo para descubrir el error que puede estar ocurriendo en nuestra aplicación web.

Saludos!