Tip rápido: usando inspector web para depurar en Safari móvil

Construir y depurar sitios y aplicaciones web para dispositivos móviles puede ser una dura tarea. En escritorio tenemos poderosas herramientas de depuración; la mayoría de los navegadores poseen un inspector web de algún tipo. Pero no tenemos esas herramientas para dispositivos como el iPhone y iPad … eso es, ¡hasta ahora!

Con el reciente lanzamiento de Safari 6 y iOS 6, puedes usar el inspector web para construir y depurar sitios web en escritorio y Safari Móvil. ¿Lo mejor de todo? Es un proceso simple de configurar. Sigue este tutorial y tendrás algunas poderosas herramientas para iDevices móviles a tu alcance y en poco tiempo.

Las herramientas para desarrolladores de los navegadores modernos han sido de inmensa ayuda construyendo sitios web y aplicaciones. Chrome tiene a developer tools. ¿Firefox? Firebug. ¿Safari? Web inspector. Todas ellas, herramientas extremadamente poderosas en desarrollo web.

Sea como fuere, hasta este punto depurar sitios y aplicaciones web en dispositivos móviles ha sido una dura tarea. Como Safari y Chorme funcionan bajo el motor webkit, hay muchas similitudes en la forma en que el navegador de escritorio y el móvil reproducen una estructura web. Por lo tanto, la mayoría de los diseñadores/desarrolladores construyen y modifican sus sitios en escritorio usando uno de estos navegadores, asumiendo que las similitudes resultantes del motor webkit, reproducirán la página de la misma manera en un dispositivo móvil.

Sin embargo, las plataformas móvil y de escritorio son sumamente diferentes. Tienen diferentes capacidades de memoria, potencial de desempeño, dispositivos de entrada, y conectividad a la red. Es así como se ha vuelto imperativo que las herramientas de depuración para dispositivos móviles de un diseñador, tengan mejor desempeño y coincidan con sus contrapartes de escritorio.

Nuevas versiones de software de Apple de iOS 6 y Safari 6 ya brindan a los dispositivos móviles muchas de las características de las herramientas de depuración existentes en los navegadores de escritorio que todos conocemos y amamos. Este tutorial te enseñará el simple proceso de configuración para depurar sitios web móviles usando el inspector web de Safari.

Antes de comenzar, una nota sobre compatibilidad: Unas cuantas malas noticias para aquellos que usan Windows. Solo se puede depurar usando el inspector web remoto en una Mac. Safari 6 para windows no está disponible. Además, Safari 6 está solo disponible para Macs con OSX Lion o superior.

Métodos para usar Inspector Web

Hay dos métodos para usar el inspector web en Safari Móvil:

1. Método de Dispositivo Real: Usar un iDevice real (iPhone, iPad, etc.) conectado a tu computadora vía USB
2. Método de Dispositivo Virtual: Usar el simulador iOS, que es parte de Xcode

Cubriremos ambos métodos y te dejaremos elegir el que se adapte mejor a tu situación.

Paso 1: Asegúrate de estar al día

Debido a que depurar dispositivos móviles con inspector web es una nueva característica, tendrás que asegurarte de tener el software más reciente.

Método de Dispositivo Real: Para usar el inspector web en tándem con un iDevice real, necesitarás lo siguiente:

• Un iDevice (iPhone, iPad, iTouch) funcionando bajo iOS 6
• Cable USB
• Safari 6
• Mac OSX Lion (10.7.4) o superior

Método de Dispositivo Virtual: Para usar el inspector web en tándem con el simulador iOS, necesitarás lo siguiente:

• Safari 6
• Mac OSX Lion (10.7.4) o superior
• Xcode 4.5 con SDK iOS 6 (disponible en el app store)

Revisar versiones de Software: Para revisar si estás usando iOS 6 en tu iDevice, ve a "Settings > General > About" en tu dispositivo.

Para checar si estás usando Safari 6, ve a la barra de menú de Safari y haz click en "Safari > About Safari".

Para asegurarte de estar usando Lion, haz click en el logo de Apple en la barra de menú y elige "About this Mac"

Para asegurarte de estar usando la versión correcta de Xcode, abre Xcode y selecciona "Xcode > About Xcode"

Paso 2: Activa Developer Tools

Debes habilitar las herramientas para desarrolladores e inspector web en las versiones de escritorio y móvil de Safari.

Métod de Dispositivo Real: Si vas a usar un dispositivo real, conéctalo a tu mac vía USB.

Método de Dispositivo Virtual: Si vas a usar el simulador iOS, abre Xcode, y haz click derecho en el ícono de Dock y selecciona "Open Developer Tool > iOS Simulator".

Safari Móvil: En tu iDevice real o en el simulator iOS ve a "Settings > Safari > Advanced" y activa "Web Inspector".

Safari de Escritorio: If you don’t already, ensure you have developer tools in Safari turned on. You’ll know you have them turned on if you can see "Develop" in the menu bar.

If you can’t see "Develop" in the menu bar, go to the menu bar and click "Safari > Preferences > Advanced" and select the "Show develop menu in menu bar" checkbox.

Paso 3: Inspecciona tu Sitio Web

Ahora que tienes el Simulador iOS abierto o tu iDevice conectado a tu mac vía USB (¡o ambos!), ya estás listo para comenzar a usar el inspector web en tu sitio.

En tu mac, abre Safari y ve a "Develop". Deberías ver ahora cualquiera de los iDevices (virtuales o reales) que tengas conectados y funcionando con tu mac. En la imagen abajo, verás que tengo dos dispositivos en el menú: uno es el simulador iOS, el otro es un iPhone real conectado a mi mac.

Con el fin de empezar a inspeccionar realmente un sitio web, debes haber lanzado Safari móvil en el dispositivo, y tener una de las abiertas en el sitio web. Si no tienes Safari móvil abierto, verás un mensaje indicando "No Inspectable Applications" (No hay aplicaciones inspeccionables).

Para comenzar a inspeccionar, simplemente introduce la URL de la página que quieres inspeccionar en Safari móvil y elige ese mismo sitio desde el menú "Develop". Puedes comenzar inspeccionando sitios en tu iDevice real o desde el simulador iOS. Cuando selecciones la página, verás una superposición azul en la página, indicando cual has seleccionado.

Al elegir un sitio, el inspector web de Safari se abrirá permitiéndote comenzar a inspeccionar tu sitio web. ¡Eso es todo!

Conclusión

Ahora que tienes el inspector web de Safari a tu alcance, tienes mucho más control construyendo y depurando sitios y aplicaciones web.

He aquí una muestra de algunas cosas que puedes hacer ahora al depurar sitios web:

• Hacer cambios en vivo a tu HTML y CSS.
• Ver cómo tu sitio web/aplicación se desempeña incluyendo vistas de detalles sobre eventos en JavaScript y peticiones de red.
• Depurar JavaScript usando puntos de ruptura (o breakpoints) y otras herramientas.
• Ver advertencias y errores.
• Tener acceso a la consola.
• Búsqueda en el DOM.
• Tener acceso y ver almacenamiento del sitio.

Ya tienes las herramientas, adelante y ¡a desarrollar!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!