Page Speed es una aplicación que puedes añadir a tu navegador Firefox como addon de Firefox pero debes tener en cuenta que requiere tener instalado previamente Firebug.

Una vez instalado, reinicias el navegador Firefox y, cuando actives Firebug en alguna página que estés visualizando, dispondrás de una nueva pestaña en esta utilidad llamada “Page speed“. Si haces clic en este nuevo apartado vas a poder analizar el rendimiento de la página que has cargado en el navegador, y al finalizar el proceso te muestra una lista de problemas mayores y menores, con recomendaciones de solución.

Los recursos que ofrece son impresionantes, no hay nada más que ver las recomendaciones para las imágenes, con muestras comprimidas de tus imágenes grandes,que además puedes definir que te las guarde en una carpeta de tu ordenador para luego sustituirlas por las existente, una gozada. También puedes guardar un registro de la actividad de la aplicación, y ver tus mejoras en carga de página a lo largo del tiempo.

Tampoco te pierdas la página de recomendaciones para mejorar la velocidad de tu web, una documentación realmente valiosa, con trucos y consejos realmente válidos.

En fin, que es una herramienta genial que, unida a Firebug, te ofrece de lo mejor para el análisis de webs en Firefox. Es una pena no haya la posibilidad de usarlo también en otros navegadores. Aquí te dejo unas capturas de esta pequeña maravilla, y más abajo un vídeo donde se explican sus virtudes …

Hay un vídeo en este post, me temo que tendrás que hacer clic aquí para verlo

Artículos Relacionados:

• Artemis Buzz – Reputación digital semántica
• Deja de quejarte porque no comenten en tu blog
• Google TV explicado de manera sencilla
• Como funciona el buscador Google
• Búsquedas seguras en Google

Uno de estos detalles es la renovación de la herramienta de desarrollo llamada Inspector Web, toda una caja de herramientas para el programador o diseñador web.

Para acceder al Inspector Web antes debes activar el menú de desarrollo. Para eso abre el Terminal de tu Mac y teclea lo siguiente:

defaults write com.apple.Safari IncludeDebugMenu 1

La siguiente vez que abras Safari 4 verás el nuevo  menú llamado “Desarrollo” y una de sus opciones el el Inspector Web. Entre las novedades tienes …

• Abre en un marco por defecto
• Pestaña Bases de Datos
• Parametrización de Perfiles
• Depuración de Scripts
• Apartado “Tamaño” en la pestaña de Recursos
• Lupa para seleccionar elementos de la web que visitas y revisar su código
• Iconos para identificar errores y advertencias

Como siempre, puedes editar online el código, revisar la carga de la página, inspeccionar código y muchas cosas más, imprescindible para cualquier desarrollador.

Siempre he hablado de las virtudes de Firebug pero si tengo que elegir una combinación perfecta de velocidad y prestaciones ahora mismo el mejor navegador es Safari 4.

Artículos Relacionados:

• Video de presentación del iPad Completa
• UPyD recomienda no usar Internet Explorer
• Mailto a GMail
• Google Page Speed – Lo que corre tu web
• LaNación.com no te sigue, no los sigas tu

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools
4. Safari + Inspector Web

Pues si, ha quedado para el final el mejor – mi preferido -, la combinación del navegador Safari y su aplicación interna Inspector Web, toda una maravilla de aplicación de debug y desarrollo web integrada en el navegador estrella de Apple.

Desde la versión 3, Safari tiene incluida esta herramienta, potente a la vez que sencilla de utilizar, que dispone de muchas virtudes. ¿Lo mejor de todo?, que no es nada comparada con la que viene incluida en Safari 4, aún en desarrollo pero ya disponible para los miembros del ADC en versiones para Mac OS X Tiger, Mac OS X Leopard y Windows.

El Inspector Web es, de lejos, la aplicación mas agradable y sencilla de utilizar de todas las que hemos cubierto en esta serie. Dispone de un resaltado de código realmente agradable y todo funciona suave y limpio, sin asperezas, como si no costara nada mostrar códigos internos. Una vez has probado el resto de herramientas, sobre todo la combinación Internet Explorer + Developer Tools, sabes apreciar la diferencia.

A simple vista parece que tiene un fallo notable, y es la posibilidad de hacer clic en un elemento para resaltarlo, como el “Inspect” de Firefox + Firebug pero afortunadamente lo consigue con honores – solo que no es muy obvio. Para hacerlo solo debes hacer clic derecho en un elemento de la página, hacer clic en el item del menú llamado “Inspeccionar elemento” y te la resalta y te muestra el código relacionado con el mismo, una maravilla. También lo puedes hacer al contrario, pues si seleccionas una parte de código igualmente te resalta la parte de la página afectada. De hecho puedes usar esta técnica en todos y cada uno de los elementos a inspeccionar y te mostrará una nueva ventana del Inspector Web con las propiedades de ese elemento en concreto. Es ciertamente exhaustivo.

Por supuesto, puedes editar CSS en directo y si quieres “inactivar” estilos. Dispones de una vista de plantilla, llamada Metrics para la visualización de los anchos, padding, etc. También hay debug de scripts que te “anuncia” con iconos de colores los errores existentes, visualización de las imágenes de la página, navegador de la ruta que has seguido para llegar a cada elemento (muy al estilo de la iTunes Store), “bocadillos” que te dan consejos, mas información al hacer clic en cada elemento de lista o ventana, de todo.

Es una herramienta tremendamente completa, que funciona a la perfección y una aplicación imprescindible para un desarrollador web, de hecho la mejor que he visto. Y no es pasión maquera, que también, sino pura y dura comparación de herramientas. De hecho me alegro de haberla probado la última porque sino las otras (salvo Firebug) habrían quedado fatal, es hasta decepcionante usar las Developer Tools de Microsoft o Dragonfly después de disfrutar la interfaz y enorme información que facilita el Inspector Web de Safari.

Bueno, nada mas, espero que hayas disfrutado esta serie o al menos hayas conocido estas herramientas.

Artículos Relacionados:

• Video de presentación del iPad Completa
• Mailto a GMail
• Google Page Speed – Lo que corre tu web
• LaNación.com no te sigue, no los sigas tu
• moof – iTunes y YouTube todo en uno online

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools
4. Safari + Inspector Web

Casi llegamos al final de esta serie de herramientas de desarrollo integradas en los navegadores. No cubriremos todos los navegadores existentes, pero si los mas importantes. Hoy vamos a adentrarnos en las posibilidades que nos ofrece Internet Explorer a la hora de ofrecer herramientas para webmasters o navegantes curiosos.

Para ello nos vamos a valer de las Developer Tools, ya incluidas de serie en la versión ßeta de Internet Explorer 8 y que pueden descargarse para Internet Explorer 7.

No obstante, la barra para desarrolladores de Internet Explorer 7 adolece de bastantes fallos por lo que es mas recomendable utilizar la DebugBar en su lugar, que ofrece la misma funcionalidad. Es de suponer que cuando salga a la luz la versión definitiva de Internet Explorer 8 salga como aplicación en descarga separada.

Metidos en harina, ciertamente no parece que vaya a ser mi preferida porque adolece de bastantes cuestiones. Por una parte, es interesante la opción de “Seleccionar elemento mediante clic“, similar a la herramienta Inspect que veíamos en el artículo de Firefox + Firebug, no es igual de potente pero funciona muy bien.

Un fallo importante es que no permite la edición “al vuelo”, por lo que no podrás visualizar cambios realizados en el PHP, CSS o XHTML de la página que visualizas.

Muy parecida a Dragonfly, el hecho es que es casi una necesidad la existencia de esta herramienta, a pesar de que no aporte nada de relevancia, y es necesaria para muchos desarrolladores que utilicen Internet Explorer como navegador principal.

Bueno, menos mal que mañana veremos la mejor herramienta de todas, y mi recomendación especial.

Artículos Relacionados:

• UPyD recomienda no usar Internet Explorer
• Mailto a GMail
• Google Page Speed – Lo que corre tu web
• LaNación.com no te sigue, no los sigas tu
• El Inspector Web de Safari 4

Artículos Relacionados:

• UPyD recomienda no usar Internet Explorer
• Mailto a GMail
• Google Page Speed – Lo que corre tu web
• LaNación.com no te sigue, no los sigas tu
• El Inspector Web de Safari 4

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools
4. Safari + Inspector Web

Bueno, seguimos hoy con la serie de Herramientas para desarrolladores, y en esta ocasión vamos a ver una de las utilidades mas conocidas, e imprescindible para muchos. No es que sea la mejor, que ya anticipo que no lo es, pero si la mas utilizada gracias – preferentemente – a la gran implantación del navegador Firefox.

Firebug es un añadido al navegador Firefox que se instala separadamente pero que luego funciona totalmente integrado en Firefox mostrando un icono en la parte inferior de la pantalla que mostrará si hay problemas de código en la página que estás visitando o no, y en cualquier caso te ofrece herramientas de desarrollo y debug avanzadas al pulsar en su icono.

Una vez abierta la zona de trabajo tienes de todo: muestra de errores, pruebas de rendimiento, vista completa del DOM, edición en vivo, consola, etc. Pero lo mejor que tiene Firebug es el botón de inspección “Inspect”, que te permite mostrar partes concretas de la página solo con colocar el cursor sobre cada sección de la misma, identificando las partes de código que la componen.

(clic para ampliar)

Firebug es una de mis herramientas preferidas y mi elegida para Firefox (aunque hay mas), no obstante no es la mejor de todas, esa queda para el último artículo de esta serie – y aún queda otro mas antes.

Artículos Relacionados:

• UPyD recomienda no usar Internet Explorer
• Mailto a GMail
• Google Page Speed – Lo que corre tu web
• LaNación.com no te sigue, no los sigas tu
• El Inspector Web de Safari 4