Usando Inspector web de Safari para depurar un sitio en el simulador de IOS (Xcode)
29/03/2019 by Casanova

Front.id

A la hora de depurar un sitio, siempre contamos con la ayuda de nuestro compañero, el inspector web. Cada navegador tiene el suyo y en casi todos, es este precisamente quien tambien nos permite emular el comportamiento de un dispositivo móvil. En Firefox tenemos la "Vista de diseño adaptable", en Chrome el "Toggle device toolbar", etc.

Inspector web

Pero la excepción aparece cuando necesitamos simular y depurar un sitio en IOS. Aunque Safari posee su inspector, para simular un dispositivo móvil debemos hacer uso de Xcode, que cuenta con un abanico de herramientas y entre ellas el Simulador.

XcodeVeamos ahora paso a paso, como usar el Inspector web de Safari para depurar un sitio que estamos simulando con Xcode.

 

Simulador IOS

Abrimos Xcode y vamos a:
Xcode > Open Developer Tool > Simulator

Step 1

Desde el simulador en:
Hardware > Device
elegimos el dispositivo que deseamos emular

Step 2

Dentro del dispositivo emulado, abrimos Safari e ingresamos al sitio que deseamos depurar.

Screen

Safari desktop

El inspector para Safari IOS se hace desde el Safari que tienes en tu mac, el de escritorio. Abrimos Safari y desde desarrollo vamos a encontrar el dispositivo emulado y el sitio en cuestión.

Safari

 

A partir de este momento el inspector que se abra estará apuntando a la pagina que tienes abierta en el emulador lo que te permitirá manipular el DOM, estilos y js.

Screen

 

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.