Historial de un navegante

by Angel

FireBug: Herramientas para desarrollo web (I)

with 2 comments

Firebug: se integra a Firefox para, al igual que la extensión Web Developer, ayudarte a desarrollar, evaluar y depurar sitios web, controlando el CSS y HTML en tiempo real, midiendo el tiempo de carga para optimizar la página o corrigiendo los posibles inconvenientes con Javascript.

Ofrece múltiples posibilidades entre las que destacamos:

  • Edición de HTML en tiempo real: Las ventajas de esto son muchas y creo que no hace falta mencionarlas. Firebug nos permite ver el código fuente y editarlo mientras vemos como quedan los cambios, destacando las modificaciones que realizamos nosotros. Tiene un buscador integrado y nos permite exportar los cambios fácilmente.
  • Inspecciona tu hoja de estilos: También podremos editar los estilos en tiempo real, autocompletando las propiedades si asi lo quisieramos. La interfaz para esto es realmente muy intuitiva.
  • Monitorea el tiempo de carga de las páginas: Muchas veces optimizar un sitio web se vuelve complicado, en particular con sitios con muchas imágenes, javascript y hojas de estilo. ¿Cómo sabemos cual es el mayor causante de la lentitud de carga? ¿Cómo sabemos donde debemos trabajar para mejorar la velocidad de carga? Ésta extensión nos muestra cáda petición realizada al sitio y los segundos de demora en obtenerla.

tiempo de carga

  • Depurador de Javascript: Aquí Firebug realmente se destaca por sobre cualquier otra extensión. Podemos buscar los scripts fácilmente y pausarlos en el momento que nosotros querramos. También detecta exactamente en qué linea de código existe un error si lo hubiera y también medir el tiempo de carga de cáda función.

Enlace de descarga: FireBug

También existe Companion.JS, aunque es una viene a ser una versión limitada para Internet Explorer.

En Google Chrome todavía no está disponible, pero mientras esperamos que Google Chrome soporte extensiones podemos hacer uso de Firebug Lite, un archivo JavaScript que simula algunas características de Firebug y que puede ser usado en cualquier navegador.

Se puede hacer casi lo mismo con Google Chrome, siguiendo estos pasos, que me ha dicho Juan Rived del blog “AllGeek“:

  1. Clic en el botón de la “Hoja
  2. Seleccionar la opción “Opciones para desarrolladores
  3. Consola de JavaScript o pulsar la combinación de teclas “Ctrl + Mayus + J
google

Opciones de desarrolladores, el FireBug para Google Chrome.


Anuncios

Written by Angel Flores

4 noviembre 2009 a 20:24

2 comentarios

Subscribe to comments with RSS.

  1. […] Adornos navideños (V)Herramientas para desarrollo web (III)Herramientas para desarrollo web (II)Herramientas para desarrollo web (I)Adornos navideños […]

  2. […] Diciembre 2009 de Ángel Este complemento para FireBug es un validador de código HTML según la http://validator.w3.org/check y muestra los errores que […]


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: