Cómo activar herramientas de desarrollador en Safari. Consejo rápido: depurar Mobile Safari con Web Inspector

Crear y depurar sitios web y aplicaciones web para dispositivos móviles puede ser una tarea difícil. Contamos con potentes herramientas de depuración en el escritorio; La mayoría de los navegadores tienen un inspector web. Pero no tenemos las mismas herramientas para dispositivos como el iPhone y el iPad... ¡hasta ahora!

Con el reciente lanzamiento de Safari 6 e iOS 6, ahora puede utilizar Web Inspector para crear y depurar sitios web en Safari de escritorio y móvil. ¿Cómo? El proceso de configuración es simple. Sigue esta guía y tendrás herramientas de depuración móviles muy poderosas a tu alcance casi 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. ¿Zorro de fuego? . ¿Safari? Inspector web. Todas herramientas extremadamente poderosas en el desarrollo web.

Sin embargo, hasta ahora, depurar sitios web y aplicaciones web en dispositivos móviles ha sido una tarea difícil. Dado que Safari y Chrome se ejecutan en el motor webkit, existen muchas similitudes en la forma en que el navegador de escritorio y el móvil representan el diseño web. Por lo tanto, la mayoría de los diseñadores/desarrolladores crean y personalizan sus sitios web en el escritorio utilizando uno de estos navegadores, asumiendo que el motor webkit hará que la página tenga el mismo aspecto en un dispositivo móvil.

Sin embargo, las plataformas móviles y de escritorio son bastante diferentes. Tienen diferentes capacidades de memoria, potenciales de rendimiento, dispositivos de entrada y conexiones de red. Por lo tanto, se ha vuelto imperativo que las herramientas de depuración de diseñadores para dispositivos móviles sean más eficientes y consistentes con sus contrapartes de escritorio.

Las nuevas versiones de software de iOS 6 y Safari 6 de Apple traen muchas de las características de las herramientas de depuración de escritorio que todos conocemos y amamos de los dispositivos móviles. Este tutorial le mostrará un proceso simple para obtener configuraciones para depurar sitios móviles usando Safari Web Inspector.

Primero, preste atención a la compatibilidad: Hay malas noticias para los usuarios de Windows. Sólo puedes depurar el inspector web remoto en Mac. Safari 6 para Windows no está disponible. Además, Safari 6 sólo está disponible para computadoras Mac con OSX Lion o superior.

Métodos para utilizar inspectores web.

Hay dos métodos para utilizar Web Inspector en Safari móvil:

1. Método de dispositivo real: use un iDevice real (iPhone, iPad, etc.) conectado a la computadora a través del puerto USB
2. Método de dispositivo virtual: Utilice el simulador de iOS que forma parte de Xcode

Analizaremos ambos métodos y elegiremos el que mejor se adapte a su situación.

Paso 1: Asegúrate de estar actualizado

Dado que la depuración móvil con el inspector web es una característica nueva, debe asegurarse de tener el software más reciente.

Método de dispositivo real: Para utilizar el inspector web junto con un iDevice real, necesitará lo siguiente:

• IDispositivo (iPhone, iPad, iTouch) con iOS 6
• cable USB
• Safari 6

Para utilizar el inspector web junto con el simulador de iOS, necesitará lo siguiente:

• Safari 6
• Mac OSX Lion (10.7.4) o superior
• Xcode 4.5 con iOS 6 SDK (disponible en la tienda de aplicaciones)

Comprobación de versiones de software: Para verificar si está ejecutando iOS 6 en su iDevice, vaya a "Configuración > General > Acerca de" en su dispositivo.

Para comprobar si estás utilizando Safari 6, abre la barra de herramientas de Safari y haz clic en Safari > Acerca de Safari.

Para asegurarte de que estás usando Lion, haz clic en el logotipo de Apple en la barra de menú y selecciona "Acerca de esta Mac".

Para asegurarse de que está utilizando la versión correcta de Xcode, abra Xcode y seleccione "Xcode > Acerca de Xcode".

Paso 2: habilite las herramientas de desarrollo

Debe habilitar las herramientas de desarrollo y el inspector web en las versiones de escritorio y móvil de Safari.

Método de dispositivo real: Si vas a utilizar un dispositivo real, conéctalo a tu Mac mediante USB.

Método de dispositivo virtual: Si va a utilizar el simulador de iOS, abra Xcode, luego haga clic derecho en el icono del muelle y seleccione "Abrir herramienta de desarrollo > Simulador de iOS".

Safari móvil: En su iDevice real o simulador de iOS, vaya a Configuración > Safari > Avanzado y habilite Web Inspector.

Safari de escritorio: Si aún no lo has hecho, asegúrate de que las herramientas de desarrollador de Safari estén habilitadas. Puede verificar esto abriendo "Desarrollar" en la barra de menú.

Si no ve "Desarrollar" en la barra de menú, vaya a la barra de menú y haga clic en "Safari > Preferencias > Avanzado" y marque la casilla de verificación "Mostrar menú de desarrollo en la barra de menú".

Paso 3: prueba tu sitio web

Ahora que tiene abierto el Simulador de iOS o su iDevice conectado a su Mac mediante USB (¡o ambos!), está listo para comenzar a usar Web Inspector en su sitio.

En tu Mac, abre Safari y ve a la sección "Desarrollar". Ahora deberías ver todos los iDevices (virtuales o reales) que hayas conectado e iniciado usando tu Mac. En la captura de pantalla siguiente verás que tengo dos dispositivos en el menú: uno es un simulador de iOS y el otro es un iPhone real conectado a mi Mac.

Para comenzar a consultar un sitio web, debe tener Safari móvil ejecutándose en su dispositivo y tener abierta una de las pestañas del sitio web. Si no tienes Safari móvil, verás el mensaje "No hay aplicaciones inspeccionables".

Para comenzar a verificar, simplemente ingrese la URL de la página que desea verificar en Safari móvil y luego seleccione ese sitio en el menú Desarrollar. Puede comenzar a consultar sitios en su iDevice real o desde el simulador de iOS. Cuando selecciona una página, aparecerá una superposición azul en la página que indica su selección.

Una vez que seleccione un sitio, el Inspector web de Safari se abrirá y le permitirá comenzar a inspeccionar su sitio web. ¡Aquí lo tienes!

Conclusión

Ahora que tiene Safari Web Inspector en sus manos, tiene mucho más control al crear y depurar sitios web y aplicaciones web.

A continuación se muestran ejemplos de algunas de las cosas que ahora puede hacer al depurar sitios móviles:

• Realice cambios en HTML y CSS.
• Vea el rendimiento de su sitio/aplicación, incluida la visualización de detalles sobre eventos de JavaScript y solicitudes de red.
• Depure JavaScript utilizando puntos de interrupción y otras herramientas.
• Ver advertencias y errores.
• Abre la consola.
• Buscar DOM.
• Ver repositorios del sitio.

Tienes las herramientas, ¡ve y construye!

Sabe que el navegador Safari estándar tiene un menú oculto” Desarrollo" En este material hablaremos sobre las capacidades de esta sección.

¿Qué es el menú Desarrollar en Safari en Mac?

En primer lugar, este menú será útil para los desarrolladores web que necesiten acceder al código, varias opciones para mostrar páginas, deshabilitar contenido, etc. También hay varias funciones útiles para usuarios normales.

Desde este menú puede iniciar rápidamente la página actual en cualquier otro navegador instalado en su Mac. Muy útil si Safari no puede reproducir ningún contenido multimedia. Por ejemplo, si desea ver un vídeo de realidad virtual (para gafas de realidad virtual), Google Chrome es mucho más adecuado para este propósito.

Una característica igualmente interesante será el modo de mostrar el código del programa de la página. ¿Por qué podría ser necesario? Hay una pestaña " Recursos", gracias a lo cual no será difícil descargar una imagen que no responda al hacer clic derecho.

También es útil la función de borrar o deshabilitar el caché. Y a veces es necesario desactivar la visualización de imágenes o guiones.

Los diseñadores web descubrirán ellos mismos las herramientas del menú " Desarrollo", pero también me gustaría señalar la posibilidad de iniciar un modo de diseño responsivo. Muestra la calidad de optimización de la página de un sitio web según el dispositivo en el que se ejecutará y la resolución.

¿Cómo habilitar el menú Desarrollar en Safari en Mac?

1 . Inicie Safari. Seleccione una sección de la barra de menú Safari → Preferencias o presione el atajo de teclado Comando (⌘) +, (coma).

2 . Ir al " Complementos».

3 . En la parte inferior, marque la casilla junto a " Mostrar menú de desarrollador en la barra de menú».

¡Todo! Después de estos pasos, aparecerá una nueva sección “ Desarrollo».

El navegador Safari incluye varias herramientas de desarrollo para facilitar la creación y depuración de un sitio web. Por ejemplo, a través de Safari puedes ver cómo se verá un sitio en un iPhone y iPad. Para hacer esto, solo necesita especificar el agente de usuario apropiado a través del menú Desarrollo (Fig. 7.51).

Arroz. 7.51. Seleccionar un agente de usuario

Safari también tiene una excelente herramienta para depurar código HTML y CSS llamada Web Inspector. Para llamarlo, seleccione el menú. Desarrollo > Mostrar inspector web o utilice la combinación de teclas Ctrl +Alt +I. Si no tiene este elemento de menú, vaya a la configuración de su navegador, seleccione el panel Complementos y marque la casilla de verificación "Mostrar menú de desarrollo en la barra de menú".

Web Inspector muestra una lista de recursos que se encuentran en una página web: documentos, hojas de estilo, imágenes y scripts. Le permite ver y encontrar el código de la página web y las propiedades de estilo de los elementos. La interfaz del inspector web se muestra en la Fig. 7.52. De toda la riqueza de las capacidades del programa de diseño, solo nos interesa el menú Elementos.

Arroz. 7.52. inspector web

En su interfaz, el inspector web se parece a Firebug: el panel izquierdo muestra el código HTML del documento actual y el panel derecho muestra el estilo del elemento seleccionado. Cualquier elemento de la página se puede seleccionar no sólo mediante código, sino también con la ayuda de una herramienta que permite seleccionar un elemento simplemente haciendo clic en él.

El conjunto de estilos en el inspector se presenta como una lista desplegable, esto le permite incluir de forma compacta una gran cantidad de información. El primer elemento "Estilo calculado" (Fig. 7.53) contiene el estilo del elemento, que el navegador establece en función de su propio estilo, teniendo en cuenta la herencia y las propiedades agregadas.

Arroz. 7.53. estilo calculado

Estos estilos son sólo para fines informativos; no puedes cambiar nada en este momento. Se puede hacer clic en un color, si está presente, y cambiar su formato de presentación a hexadecimal, RGB o HSL.

El siguiente elemento, "Atributo de estilo", muestra el estilo integrado, es decir, el que se especifica mediante el atributo de estilo. El elemento estará vacío si no existe tal estilo.

El grupo subyacente de elementos muestra el estilo del elemento actual y los elementos interconectados con él (Fig. 7.54).

Arroz. 7.54. Estilo de elemento

Cualquier propiedad de esta lista se puede editar haciendo clic en ella. Las propiedades universales como padding o margin se muestran como una lista desplegable que enumera propiedades individuales como padding-left, padding-top, etc. Al lado de cada propiedad hay una casilla de verificación que le permite desactivarla rápidamente. Puede agregar una nueva regla usando el menú oculto detrás del engranaje en la esquina superior derecha del panel (Fig. 7.55).

Arroz. 7.55. Menú para agregar nuevas reglas

El elemento "Dimensiones" demuestra el modelo de bloque del elemento: el ancho y alto de los elementos, así como los valores de sangrías, bordes, márgenes y posicionamiento (Fig. 7.56).

Arroz. 7.56. Dimensiones del elemento

Solo tenga en cuenta que las sangrías aquí se denominan propiedades de relleno y márgenes, es decir, al contrario, y no en el sentido habitual.

Este elemento se puede utilizar no solo para determinar los valores requeridos, sino también para configurarlos. Simplemente haga doble clic en el valor deseado e ingrese el número. No es necesario especificar unidades de medida; de forma predeterminada se utilizan píxeles.