En esta guía, me gustaría explicarte en profundidad cómo utilizar las herramientas para desarrolladores de Safari. Aunque las herramientas para desarrolladores de Safari presentan algunas diferencias con respecto a las de Chrome y Firefox, el principio básico sigue siendo el mismo. Aprenderás a activar las herramientas para desarrolladores, a usar las diferentes áreas y funciones y a implementar procesos de depuración esenciales. Empecemos con las conclusiones más importantes.
Conclusiones más importantes
- Las Herramientas de desarrollo en Safari no son tan fácilmente accesibles como en otros navegadores, ya que deben activarse a través de los ajustes.
- La interfaz de usuario y las funciones de las Herramientas para desarrolladores son similares a las de otros navegadores, pero las implementaciones específicas varían.
- La depuración en dispositivos iOS es posible con Safari conectando el dispositivo a través de USB.
Instrucciones paso a paso
1. Activar las Herramientas para Desarrolladores en Safari
Para activar las Herramientas para desarrolladores en Safari, es necesario ajustar la configuración de Safari. Inicie Safari y vaya a la barra de menús. Seleccione "Safari" y, a continuación, "Preferencias".
Cambie a la pestaña "Avanzado" en el extremo derecho. Allí encontrarás la opción "Mostrar funciones de desarrollo para desarrolladores web". Active esta opción para habilitar las Herramientas para desarrolladores.
2. acceso a las herramientas para desarrolladores
Una vez activadas las Herramientas de desarrollo, puede abrirlas a través del menú "Desarrollo" de la barra de menús o utilizando determinadas combinaciones de teclas. El acceso directo mediante las teclas F12 o Alt-Cmd-I no funciona, pero puede, por ejemplo, hacer clic con el botón derecho del ratón sobre el elemento y seleccionar "Examinar elemento".
También puede utilizar la combinación de teclas Cmd+Opción+C para abrir la consola y pasar de una vista a otra.
3. navegación por las Herramientas de desarrollo
Aunque la interfaz de usuario de las Herramientas de desarrollo es similar a la que está acostumbrado a utilizar en otros navegadores, tiene algunas diferencias especiales. En la barra lateral izquierda, puedes cambiar entre las pestañas "Elementos", "Consola", "Fuentes", "Red" y otras.
Aquí puedes obtener más información sobre los elementos del sitio web para ver y editar sus estilos y diseños. Puedes editar cada estilo simplemente haciendo clic en las reglas CSS correspondientes.
4. trabajar con la consola
La consola de Safari permite ejecutar código JavaScript y mostrar los resultados deseados. Un aspecto interesante es que el formato de las salidas difiere aquí. El primer argumento se muestra como texto, mientras que los siguientes se muestran como objetos JavaScript.
Si emite mensajes de registro adicionales, asegúrese de que la visualización no tiene espacios entre los argumentos individuales, sino que están separados por guiones. Esto puede ser importante para evitar malentendidos durante la depuración.
5. establecer código fuente y puntos de interrupción
En la pestaña "Fuentes", puedes ver los archivos originales y los archivos transpilados de tu sitio web. Aquí también es posible establecer puntos de interrupción para facilitar la depuración. Para ello, basta con hacer clic en la línea de código correspondiente.
No olvides utilizar los distintos controles para facilitar el paso por el código. En Safari, el método abreviado para recorrer el código es diferente; utilice en su lugar iconos específicos.
6. realizar análisis de red
La pestaña "Red" te ofrece información exhaustiva sobre todas las peticiones que realiza tu página durante el tiempo de carga. Aquí puedes ver las peticiones enviadas y recibidas, así como sus cabeceras y vistas previas.
Una característica interesante aquí es la distinción entre cabeceras y tiempos, que te da una visión más profunda del rendimiento de tu sitio.
7. utilizar mediciones de rendimiento y líneas de tiempo
En la pestaña "Líneas de tiempo", puedes llevar a cabo amplios análisis de rendimiento y realizar grabaciones para comprender mejor la velocidad y los procesos de tu sitio.
Esta función funciona de forma similar a los perfiles de rendimiento de otros navegadores, pero es posible que tengas que acostumbrarte a algunas diferencias en la visualización y la nomenclatura.
8 Depuración en dispositivos móviles
Uno de los puntos fuertes de las Herramientas para Desarrolladores de Safari es la posibilidad de depurar sitios web en tu iPhone o iPad. Conecta tu dispositivo por USB y activa las opciones de depuración correspondientes en los ajustes del dispositivo.
A continuación, ve al menú "Desarrollar" y selecciona tu dispositivo conectado para acceder a las ventanas abiertas y a sus Herramientas para desarrolladores.
Resumen
En esta guía detallada, has aprendido a activar las Herramientas para desarrolladores de Safari, a utilizar las distintas funciones y pestañas y a realizar la depuración en dispositivos móviles. La mayoría de las funciones son similares a las herramientas de otros navegadores, pero hay diferencias específicas, especialmente en la interfaz de usuario y los atajos. Una vez que te familiarices con ellos, podrás depurar rápidamente en Safari.
