Cómo utilizar las herramientas de desarrollador web en un iphone – Parte 1

Si algún día tienes que probar un sitio web en un iphone te va a resultar de mucha utilidad acceder a las herramientas de desarrollador. Las mismas herramientas que seguramente usas cuando pruebas un sitio en un navegador de escritorio. Me refiero al inspector de Chrome, o Firefox o Web inspector en Safari.

Estas herramientas permiten examinar un componente de la página (colores, tamaño, tipo, id, etc, etc, etc), examinar los recursos almacenados por la página, tales como cookies, sesiones, etc., examinar las llamadas y sus respuestas a servicios externos, tales como apis. En fin, no voy a profundizar en las utilidades de estas herramientas, quiero mostrarles cómo pueden acceder a los mismo recursos cuando están usando un iPhone.

El primer paso es tener un Mac.

El segundo paso es habilitar las herramientas de desarrollador en el Safari del Mac. Para esto tienes que ir a Preferencias -> Avanzadas y chequear la opción “Mostrar el menú de desarrollo en la barra de menú”

menu_without_develop
Menú antes de activar Herramientas de desarrollo

Screen Shot 2018-04-19 at 15.23.18.png

Cuando activas las herramientas de desarrollador tu menú debería quedar así:

Menú luego de activar las herramientas de desarrollo

El tercer paso es conectar el iPhone mediante un cable USB al Mac.

Una vez conectado el iPhone al Mac, desde el Safari del Mac, vas a la opción Develop del menú superior y verás tu iPhone conectado. Deberías ver algo así:

Screen Shot 2018-04-19 at 15.39.35.png

Ahora sí podremos inspeccionar el sitio bajo prueba. En la siguiente imagen tengo 3 páginas abiertas en iPhone, y como vemos podría seleccionar cualquiera para inspeccionarla.

Screen Shot 2018-04-19 at 15.41.41.png

Al seleccionar la página deseada se abre el Web inspector “apuntando” a la página que nos interesa. Y empezará a inspeccionar todos los elementos de la misma, llamadas, cookies, etc.

Screen Shot 2018-04-19 at 15.48.24.png

Una vez ahí puedes comenzar las pruebas! enjoy!

 

 

 

 

 

 

 

 

 

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Blog de WordPress.com.

Subir ↑

A %d blogueros les gusta esto: