Ya hemos hablado anteriormente de las extensiones en Safari, en este caso quiero centrarme en las extensiones que utilizo para ayudarme en el diseño y programación de las paginas web que hacemos en Taiko.

Las extensiones son pequeñas herramientas adicionales que expanden las funcionalidades de tu navegador para convertirlo en una herramienta mas eficiente. Estas extensiones añadidas al Inspector de Elementos que incluye Safari, convierte a este navegador en una herramienta excelente.

Para activar las opciones de desarrollo de Safari, es necesario ir a las Preferencias de Safari, Avanzado y seleccionar "Mostrar el menú Desarrollo en la barra de menús"

Inspector de Safari

Esta es la herramienta mas potente en el navegador. Una vez activada la opción de desarrollo puedes utilizar el menú contextual, con el botón derecho, encima de cualquier elemento de la pagina que estás visualizando y poder acceder así al editor que te permitirá ver el HTML y el CSS de la pagina. También podrás desactivar o modificar partes del código para estudiar los cambios. 

Ademas tendrás acceso a herramientas adicionales como: 

• Recursos: listado de todos los archivos y tiempo de carga
• Scripts: control de scrips cargados en la pagina
• Control Temporal
• Perfiles
• Almacenamiento: bases de datos, cookies, etc
• Consola: control de errores y alertas

MeasureIT

Con un botón en la barra de herramientas te permite dibujar una regla en cualquier pagina para medir ancho, altura o alineación de los elementos de la pagina en pixeles. Esto te sirve para tener en cuenta posibles cambios en imágenes y espacios para usar en una pagina.

BuiltWith

Esta herramienta te permite ver con que tecnologías cuenta la pagina. Desde el sistema operativo del servidor, el software de servidor web, si tienes google analytics instalado o que librerías usa la pagina.

BetterSource

Esta extensión te permite ver el código fuente de la pagina, coloreado y maquetado para que se pueda leer con facilidad. Con los dos botones de la barra herramienta puedes ver el código fuente de la pagina y el codigo generado tras la ejecución, muy útiles

ResizeMe

Esta extensión añade un botón a la barra de herramientas que te permite cambiar en 6 tamaños diferentes la ventana de Safari, incluyendo a pantalla completa. También puedes acceder a está función haciendo click con el botón derecho en la ventana.

Cuando estás programando una pagina web es fundamental conocer como se va a ver la pagina en diferentes pantallas, sobre todo las dimensiones de los navegadores.

View StyleSheets

Esta utilidad te permite ver todas las hojas de estilos (CSS) que se han cargado en la pagina que estás visualizando. Con el botón de derecho puedes acceder a esta función y ver un listado de todos los archivos CSS y ver cada uno de ellos.

Todas las extensiones están disponibles en la Galería de extensiones de Safari

Etiquetas:

apple, diseño web, extension, macintosh, safari