Firebug es un plugin o extensión de Firefox creado para poder testear código y realizar optimizaciones cuando se programa un sitio web. Es un conjunto de herramientas con el que se puede analizar la velocidad de carga de los distintos elementos que componen la web, la estructura de la web. editar, encontrar errores, depurar el código fuente y ver como funciona el codigo CSS, HTML o JavaScript, ademas podemos editar o modificar cualquier aspecto y que se previsualizara de inmediato.
Firebug es un excelente complemento para acompañar con otro plugin como Web Developer. Su interfaz es fácil de utilizar y se activa solo cuando lo necesitamos, además es gratuito. El propósito de este tutorial es mostrar una utilización detallada y profesional de Firebug, también podemos ver otros tutoriales Firebug Herramienta para Desarrolladores Web y Inspeccionar HTML con Firebug.
Firebug es una herramienta imprescindible para quienes programan u optimizan sitios web, ya sea diseñadores o webmasters. Asi podremos eliminar fallos de la programación o de diseño, conocer como funcionan y como es la estructura de una página web, cómo todos los elementos que la componen.
Para instalar el plugin nos vamos a la web de descarga de firebug y allí buscamos la última versión de la herramienta para su descarga.
Luego de instalar reiniciamos el ordenador y veremos que se añade al iniciar una web,para activarlo hacemos click derecho y buscamos la opción Inspeccionar elemento:
Una vez que hayamos activado la herramienta veamos las funcionalidades mas importante:
La consola de Firebug es donde se mostraran los mensajes de lo que hace la web y los errores que se producen. Podemos ver mensajes sobre los llamados a funciones o paginas que hace la web a medida que interactuamos, mostrándonos funciones, invocaciones a callback o webservices y los valores que se intercambian en tiempo de ejecución a la vez que controlamos el flujo de la aplicación.
Veamos algunos ejemplo, accedemos a la web demotores.com.ar, damos clic derecho y activamos Firebug.
En la pestaña consola al hacer una búsqueda de Marcas, veremos que en la consola se muestra que se invoca a una función en Ajax que hará una consulta a una base de datos mediante php y devuelve los modelos en formato JSON y los añade al combo Modelos, ademas podemos ver los paramentos enviados, el encabezado devuelto por get o post y la respuesta. Veamos otro caso de una tienda online.
En este caso vemos que en la consola se indica que faltan tres fuentes o tipos de letra en la carpeta /css/font, quizás el diseñador olvido añadirlas o cambio las fuentes y no quito las referencias anteriores.
También podemos ver como al añadir un producto al carrito de compras envía los siguiente parámetros función, cantidad de producto, y el id del producto.
Así podemos ver como funciona la aplicación y que parámetro envía o recibe y que respuestas brinda y cual fue el tiempo de respuesta por ejemplo para añadir un producto tardo 335 milisegundos.
permite ver la estructura de la web y editar en tiempo real del código de la página web. Podemos por ejemplo modificar el código HTML del sitio web o el código css y verlo directamente sin que esos cambios sea permanentes. Por ejemplo sí accedemos a la web de Ebay, podemos utilizar Firebug para cambiar el color del bloque de contenido de la web o main.
Para ello desde la pestaña HTML buscamos la linea de código HTML que luce de la siguiente forma:
Podemos además probar manipulando el código html y el código css para cambiar el logo de Ebay por el de Google, se hace cambiando la url de la imagen del logo de Ebay por otra url de una imagen que queramos.
Buscamos la linea de código en el HTML y cambiamos el enlace src=”urlimagen”, luego ajustamos los tamaños
La pestaña del panel de CSS muestra todas las clases e identificadores CSS que creamos o bien que tiene la web que estamos analizando. Desde este panel podemos modificar nuestras clases y sentencias css como lo hicimos anteriormente en la pestaña Estilos del panel de HTML.
Este panel sirve para depurar código JavaScript o jQuery. Nos muestra todo lo que hace un script, sus variables, sus funciones, depuración por puntos de interrupción, la ejecución paso a paso de algún script, una pantalla para controlar la pila de variables y además podemos ver el comportamiento de las funciones.
El panel DOM o Document Object Model es el que obtiene información acerca de todas las diversas propiedades DOM y sus métodos. El DOM es parte de los elementos de una web y permite a los programadores acceder y manipular las páginas web XHTML.
JQuery proporciona métodos para manipular DOM en forma eficiente. Podemos acceder a cualquier atributo de cualquier elemento o para extraer el código HTML de un párrafo o bloque. Además de esto proporciona métodos tales como .attr(), .HTML(), y .val() que actúan como captadores y recuperación de información de elementos DOM para su uso posterior.
Veamos en este ejemplo de jQuery y DOM como controlar un div y extraer un texto:
El propósito del panel de Red es para monitorizar el tráfico web y la carga y consumo de cada petición de la web HTTP, este reporte se compone de una lista de entradas, donde cada una de estas representa una petición/respuesta de ida y vuelta realizada por la página.
La ventana del panel de red presenta una la lista de peticiones, a medida que la web se carga y se utiliza. Cada ítem de la lista muestra información que se produce por la petición y una línea de tiempo gráfica, muestra los bytes consumidos, el tiempo empleado para responder, que representa las fases de carga en el tiempo. La siguiente es una lista de la información, que se muestra para cada solicitud:
También podemos filtrar para ver partes como solo imágenes o solo archivos js o css y así determinar que pesa más y como optimizarlo.
Firebug es un excelente complemento para acompañar con otro plugin como Web Developer. Su interfaz es fácil de utilizar y se activa solo cuando lo necesitamos, además es gratuito. El propósito de este tutorial es mostrar una utilización detallada y profesional de Firebug, también podemos ver otros tutoriales Firebug Herramienta para Desarrolladores Web y Inspeccionar HTML con Firebug.
Firebug es una herramienta imprescindible para quienes programan u optimizan sitios web, ya sea diseñadores o webmasters. Asi podremos eliminar fallos de la programación o de diseño, conocer como funcionan y como es la estructura de una página web, cómo todos los elementos que la componen.
Instalamos el complemento Firebug
Para instalar el plugin nos vamos a la web de descarga de firebug y allí buscamos la última versión de la herramienta para su descarga.
Luego de instalar reiniciamos el ordenador y veremos que se añade al iniciar una web,para activarlo hacemos click derecho y buscamos la opción Inspeccionar elemento:
Una vez que hayamos activado la herramienta veamos las funcionalidades mas importante:
Pestaña consola
La consola de Firebug es donde se mostraran los mensajes de lo que hace la web y los errores que se producen. Podemos ver mensajes sobre los llamados a funciones o paginas que hace la web a medida que interactuamos, mostrándonos funciones, invocaciones a callback o webservices y los valores que se intercambian en tiempo de ejecución a la vez que controlamos el flujo de la aplicación.
Veamos algunos ejemplo, accedemos a la web demotores.com.ar, damos clic derecho y activamos Firebug.
En la pestaña consola al hacer una búsqueda de Marcas, veremos que en la consola se muestra que se invoca a una función en Ajax que hará una consulta a una base de datos mediante php y devuelve los modelos en formato JSON y los añade al combo Modelos, ademas podemos ver los paramentos enviados, el encabezado devuelto por get o post y la respuesta. Veamos otro caso de una tienda online.
En este caso vemos que en la consola se indica que faltan tres fuentes o tipos de letra en la carpeta /css/font, quizás el diseñador olvido añadirlas o cambio las fuentes y no quito las referencias anteriores.
También podemos ver como al añadir un producto al carrito de compras envía los siguiente parámetros función, cantidad de producto, y el id del producto.
Función ajax invocada insertarItem cant 1 Id 5850326Aunque podemos observar que solo se añadirá si estamos logueado como usuarios de lo contrario solicitara que nos registremos.
Así podemos ver como funciona la aplicación y que parámetro envía o recibe y que respuestas brinda y cual fue el tiempo de respuesta por ejemplo para añadir un producto tardo 335 milisegundos.
Pestaña HTML
permite ver la estructura de la web y editar en tiempo real del código de la página web. Podemos por ejemplo modificar el código HTML del sitio web o el código css y verlo directamente sin que esos cambios sea permanentes. Por ejemplo sí accedemos a la web de Ebay, podemos utilizar Firebug para cambiar el color del bloque de contenido de la web o main.
Para ello desde la pestaña HTML buscamos la linea de código HTML que luce de la siguiente forma:
<div class="main">En el panel de la derecha Estilo nos mostrara el estilo css de ese elemento, hacemos un doble clic en el renglón siguiente a la sentencia width:980px y escribimos los siguiente:
background: red none repeat scroll 0 0;Al terminar de escribir el bloque central se pondrá en rojo, si actualizamos la pagina los cambios se perderán y volverá a su diseño original.
Podemos además probar manipulando el código html y el código css para cambiar el logo de Ebay por el de Google, se hace cambiando la url de la imagen del logo de Ebay por otra url de una imagen que queramos.
Buscamos la linea de código en el HTML y cambiamos el enlace src=”urlimagen”, luego ajustamos los tamaños
<img width="128" height="128" id="gh-logo" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png" alt="" style="clip:rect128px, 128px, 128px, 0px); position:absolute; top:0px;left:0" role="presentation">Esta funcionalidad no funciona para cambiar un diseño completo pero si para hacer pequeñas pruebas y visualizar cambios, sin tener que acceder a un editor.
Pestaña CSS
La pestaña del panel de CSS muestra todas las clases e identificadores CSS que creamos o bien que tiene la web que estamos analizando. Desde este panel podemos modificar nuestras clases y sentencias css como lo hicimos anteriormente en la pestaña Estilos del panel de HTML.
Pestaña Script
Este panel sirve para depurar código JavaScript o jQuery. Nos muestra todo lo que hace un script, sus variables, sus funciones, depuración por puntos de interrupción, la ejecución paso a paso de algún script, una pantalla para controlar la pila de variables y además podemos ver el comportamiento de las funciones.
Pestaña DOM
El panel DOM o Document Object Model es el que obtiene información acerca de todas las diversas propiedades DOM y sus métodos. El DOM es parte de los elementos de una web y permite a los programadores acceder y manipular las páginas web XHTML.
JQuery proporciona métodos para manipular DOM en forma eficiente. Podemos acceder a cualquier atributo de cualquier elemento o para extraer el código HTML de un párrafo o bloque. Además de esto proporciona métodos tales como .attr(), .HTML(), y .val() que actúan como captadores y recuperación de información de elementos DOM para su uso posterior.
Veamos en este ejemplo de jQuery y DOM como controlar un div y extraer un texto:
<html>
<head>
<title>Jquery y DOM</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#bloquetexto").click(function () {
var texto = $(this).html();
$("#contenido").text('Texto extraido: '+texto);
});
});
</script>
<style>
#bloquetexto{ margin:10px;padding:10px; width:150px;
background: -webkit-linear-gradient(#f7f7f7, #8AC007); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#f7f7f7, #8AC007); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#f7f7f7, #8AC007); /* For Firefox 3.6 to 15 */
background: linear-gradient(#f7f7f7, #8AC007); /* Standard syntax */
cursor:pointer;}
</style>
</head>
<body>
<p>Extraer texto del bloque:</p>
<div id="bloquetexto" style="background:f7f7f7;">
Este es un texto de prueba DOM
</div>
<span id="contenido"> </span>
</body>
</html>
Las etiquetas HTML se acceden al elemento mediante la clase o id css y luego a la propiedad que puede ser texto o alguna otra que permita jQuery y DOM.
Pestaña Red
El propósito del panel de Red es para monitorizar el tráfico web y la carga y consumo de cada petición de la web HTTP, este reporte se compone de una lista de entradas, donde cada una de estas representa una petición/respuesta de ida y vuelta realizada por la página.
La ventana del panel de red presenta una la lista de peticiones, a medida que la web se carga y se utiliza. Cada ítem de la lista muestra información que se produce por la petición y una línea de tiempo gráfica, muestra los bytes consumidos, el tiempo empleado para responder, que representa las fases de carga en el tiempo. La siguiente es una lista de la información, que se muestra para cada solicitud:
- Método de petición HTTP
- Código de respuesta HTTP y la descripción (200,301,404, etc)
- Nombre de archivo que se invoca
- Nombre de dominio desde donde la respuesta
- Tamaño de la respuesta en bytes
- Tiempo en milisegundos que tarda en responder.
También podemos filtrar para ver partes como solo imágenes o solo archivos js o css y así determinar que pesa más y como optimizarlo.
