Share
Construir y depurar sitios web y aplicaciones web para dispositivos móviles puede ser una molestia. En el escritorio tenemos poderosas herramientas de depuración; la mayoría de los navegadores tienen algún tipo de inspector web. Pero no tenemos esas herramientas para dispositivos como el iPhone y el iPad ... es decir, hasta ahora!
Con la reciente versión de Safari 6 y iOS 6, ahora puede utilizar el inspector web para crear y depurar sitios web en el escritorio y en Safari móvil. ¿Mejor de todo? Es un proceso simple de configurar. Sigue este tutorial y tendrás a tu alcance algunas potentes herramientas de depuración para iDevices móviles al instante..
Las herramientas modernas para desarrolladores de navegadores han sido de gran ayuda en la creación de sitios web y aplicaciones web. Chrome tiene herramientas de desarrollador. ¿Firefox? Firebug. ¿Safari? Inspector de web Todas las herramientas extremadamente potentes en desarrollo web..
Sea como sea, hasta este punto la depuración de sitios web y aplicaciones web en dispositivos móviles ha sido una molestia. Como Safari y Chrome se ejecutan en el motor de webkit, existen muchas similitudes en la forma en que el escritorio y el navegador móvil representan un diseño web. Por lo tanto, la mayoría de los diseñadores / desarrolladores construyen y ajustan sus sitios web en el escritorio con uno de estos servidores, asumiendo que las similitudes resultantes del motor de webkit harán que la página sea igual en un dispositivo móvil..
Sin embargo, las plataformas móviles y de escritorio son bastante diferentes. Tienen diferentes capacidades de memoria, potencial de rendimiento, dispositivos de entrada y conectividad de red. Por lo tanto, se ha vuelto imperativo que las herramientas de depuración de un diseñador para dispositivos móviles sean más eficaces y se correspondan con las de sus contrapartes de escritorio..
Las nuevas versiones de software de iOS 6 y Safari 6 de Apple incorporan muchas de las características de las herramientas de depuración del navegador de escritorio que todos conocemos y amamos en los dispositivos móviles. Este tutorial le mostrará el sencillo proceso de configuración para depurar sitios web móviles utilizando el inspector web de Safari.
Antes de empezar, una nota sobre compatibilidad: Hay algunas malas noticias para los que usan Windows. Solo puede realizar la depuración utilizando el inspector web remoto en una Mac. Safari 6 para windows no está disponible. Además, Safari 6 solo está disponible para Mac con OSX Lion o superior.
Hay dos métodos para usar el inspector web en Safari móvil:
Cubriremos ambos métodos y le permitiremos elegir el que mejor se adapte a su situación..
Debido a que la depuración de dispositivos móviles con el inspector web es una nueva característica, deberá asegurarse de tener todo el software más reciente..
Método de dispositivo real: Para utilizar el inspector web junto con un iDevice real, necesitará lo siguiente:
Método de dispositivo virtual: Para utilizar el inspector web junto con el simulador de iOS, necesitará lo siguiente:
Comprobación de versiones de software: Para comprobar si está ejecutando iOS 6 en su iDevice, vaya a "Configuración> General> Acerca de" en su dispositivo.
Para comprobar si está ejecutando Safari 6, vaya a la barra de menú de Safari y haga clic en "Safari> Acerca de Safari".
Para asegurarse de que está ejecutando Lion, haga clic en el logotipo de Apple en la barra de menú y seleccione "Acerca de esta Mac"
Para asegurarse de que está ejecutando la versión correcta de Xcode, abra Xcode y elija "Xcode> Acerca de Xcode"
Debe habilitar las herramientas de desarrollador y el inspector web en las versiones de escritorio y móviles de Safari.
Método de dispositivo real: Si va a utilizar un dispositivo real, conéctelo a su mac a través de USB.
Método de dispositivo virtual: Si va a utilizar el simulador de iOS, abra Xcode, luego haga clic con el botón derecho en el icono de la base y elija "Abrir la herramienta del desarrollador> Simulador de iOS".
Safari para móviles: En su iDevice real o en el simulador de iOS, vaya a "Configuración> Safari> Avanzado" y active "Inspector web".
Safari de escritorio: Si aún no lo ha hecho, asegúrese de tener activadas las herramientas de desarrollador en Safari. Sabrá que los tiene encendidos si puede ver "Desarrollar" en la barra de menú.
Si no puede ver "Desarrollar" en la barra de menú, vaya a la barra de menú y haga clic en "Safari> Preferencias> Avanzadas" y seleccione la casilla de verificación "Mostrar menú de desarrollo en la barra de menú".
Ahora que tiene el simulador de iOS abierto o su dispositivo iDevice conectado a su mac a través de USB (¡o ambos!), Está listo para comenzar a usar el inspector web en su sitio web.
En tu mac, abre Safari y ve a "Desarrollar". Ahora debería ver cualquier iDevices (virtual o real) que haya conectado y ejecutando con su mac. En la siguiente captura de pantalla, verás que tengo dos dispositivos en el menú: uno es el simulador de iOS y el otro es un iPhone real conectado a mi mac.
Para comenzar realmente a inspeccionar un sitio web, debe tener Mobile Safari en el dispositivo y tener una de las pestañas abiertas en el sitio. Si no tiene Mobile Safari abierto, verá un mensaje que indica "No hay aplicaciones inspeccionables".
Para comenzar a inspeccionar, simplemente ingrese la URL de la página que desea inspeccionar en Mobile Safari y luego elija ese sitio del menú "Desarrollar". Puede comenzar a inspeccionar sitios en su iDevice real o desde el simulador de iOS. Cuando seleccione la página, verá una superposición azul en la página, que indica cuál ha seleccionado.
Al elegir un sitio, el inspector web de Safari se abrirá y le permitirá comenzar a inspeccionar su sitio web. Eso es!
Ahora que tiene el inspector web de Safari a su alcance, tiene mucho más control en la creación y depuración de sitios web y aplicaciones web..
Aquí hay una muestra de algunas cosas que puede hacer ahora al depurar sitios móviles:
Tienes las herramientas, ve y construye.!
Accentsconagua