¡Sin Firebug no trabajo!

PorAdriana Freire

¡Sin Firebug no trabajo!

Si eres un dummie en esto de la programación, hay una herramienta imprescindible (¡y por encima gratuita!) que tienes que empezar a usar tan pronto acabes de leer.

¿Te suena Firebug?

Firebug es una extensión de Mozilla-Firefox con la que puedes inspeccionar y editar el código de una web mientras ves los cambios en tiempo real en tu navegador.

Se trata de una herramienta Open Source y gratuita, ¡así que ya estás tardando en instalarla!

Encuéntralo aquí

Accede a esta extensión desde la página de complementos de Mozilla o desde la web oficial de Firebug. Si no, en el apartado de Herramientas > Complementos de tu navegador puedes obtener todos los que quieras. Como ves, Firebug está entre los más descargados, y de hecho, Firefox ya está trabajando para integrarlo de forma definitiva en su lista de herramientas nativas.

Sus funciones básicas

Que seas un dummie no quiere decir que no te vaya la marcha. ¡Entramos en materia!

  • Inspecciona elementos para ver su código fuente

Selecciona la pestaña “Inspector” y pincha sobre el elemento que quieras analizar. El fondo se pondrá en azul para que lo identifiques fácilmente.

Con esta función accedes al código HTML del elemento, puedes visualizar sus reglas de estilo (dimensiones, color, márgenes…) y el lugar en el que se encuentra dentro del DOM (árbol jerárquico).

firebug1

  • Modifica los códigos HTML y JavaScript

Edita o borra los elementos del código cuando lo necesites. También puedes copiar el HTML de la página y pegarlo en un archivo a parte.

Además, accedes a todas las funciones de JavaScript que se aplican en la web.

  • Juega con el CSS

El “Editor de estilos” te permite modificar reglas CSS.

Puedes editar los atributos del elemento seleccionado, incorporar o borrar propiedades del estilo… Modifica a tu gusto los valores de padding, border, margin, etc. y mira en tiempo real cómo va cambiando tu web.

  • ¡A debuggear!

Entra en la pestaña “Consola” y localiza los errores HTML, CSS o JavaScript que haya en el código. Revisa que las funciones de los scripts se comportan correctamente, que no haya puntos de interrupción…

  • Monitoriza la Red

Desde la pestaña de Red puedes monitorizar el tráfico y el consumo de cada petición de tu web. Firebug te muestra el nombre y tipo de archivo, número de bytes consumidos, tiempo que tarda en responder la petición…

Así sabes qué archivos de tu web pesan más y empiezas por ahí para intentar optimizarla 🙂

firebug2

  • Ah, ¡y el responsive!

En el menú de arriba a la derecha tienes una pestaña desde la que probar si el diseño de tu web es adaptables o responsive. ¡Un imprescindible hoy en día!

Nota importante: si editas sobre el navegador, las modificaciones que hagas en la página no se guardarán. Ésta volverá a su estado original en cuanto la recargues. Ahora bien, si trabajas sobre una página alojada en un proyecto local, te permite mantener los cambios 😀

¿Que usas otro navegador? Cuentas con otras herramientas similares dentro de la oferta de extensiones para desarrolladores, así que no te preocupes 😀

¡Lo dicho! Si estás aprendiendo a desarrollar páginas web, dedícale un ratito al día al Firebug. ¡De verdad que te lo vas a pasar bien!

Sobre el autor

Adriana Freire administrator

Deja un comentario