Cargando

Ir a contenido

X


Ver Más! Profesionales IT y desarrolladores: Llega el evento más importante del año! Servicios cloud, Business Applications, Analytics, IoT, Machine Learning, Bots, Blockchain etc.


 


Como optimizar una web utilizando el plugin Firebug

Firebug es un plugin o extensión de Firefox creado para poder testear código y realizar optimizaciones.


Escrito por sep 09 2015 21:17


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.


logo-firebug.gif



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.

Picture1.png



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:


Picture2.jpg



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.


Picture4.png



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.

Picture5.png



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 5850326
Aunque 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.


Picture6.png



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.


Picture7.png



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>

Picture8.png



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.


Picture9.png



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.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 09 2015 21:17
  •   Actualizado sep 10 2015 17:39
  •   Visitas 1.6K
  •   Nivel
    Intermedio