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.


 


Firebug Herramienta para Desarrolladores Web

La herramienta Firebug, es una extensión gratuita para Mozilla Firefox especialmente diseñada para todos aquellos desarrolladores y programadores que se dedican al desarrollo web. Su objetivo principal es el de facilitar la gran mayoría de los trabajos de depuración y testeo, que se hacen durante el desarrollo de una aplicación web y que tienen que ver con el rendimiento, la interfaz y las librerías que se ejecutan.



Escrito por jul 11 2014 19:46 firefox


Es un paquete de utilidades con el que se puede analizar y testear velocidad de carga según cada componente, archivo, ademas podemos editar, monitorizar y depurar el código fuente, CSS, HTML y Javascript de una página web de manera instantánea y en tiempo real observar el cambio en la web. También sirve para analizar el comportamiento de variable o url con parámetros, pudiendo ver que parámetros se envían y que responde el servidor.

Algunas de las funcionalidades que trae Firebug:
  • Edición en tiempo real de HTML.
  • Edición en tiempo real de CSS.
  • Edición en tiempo real de Javascript.
  • Disposición de CSS.
  • Depurador Javascript.
  • Buscador integrado.
  • Monitorización de la actividad de la red.
  • Explorador del DOM.
  • Gestor de errores en Javascript, CSS y XML
Comenzaremos descargando e instalando el complemtento Firebug:




firebug1.jpg



Desde la web de Mozilla addons se nos permitirá acceder al complemento e instalarlo

Una vez instalado Firebug y reiniciado Firefox, podemos acceder rápidamente a Firebug mediante el clic derecho sobre la pantalla de la web que queremos trabajar o desde el menú herramientas

Tomamos la web de la las naciones unidas de ejemplo http://www.un.org/en/, hacemos un lic derecho sobre la pantalla y se abrirá una pantalla con Firebug.





En este caso en la pestaña red vemos el peso en kb y en que secuencia ha renderizado los elementos el navegador y cuanto a tardado cada elemento en mostrarse es interesante observar que de los 6.61 segundo que tarda la pagina en renderizar, dos segundos corresponde a una sola imagen, que es la barra de idiomas, entonces podríamos pensar si se puede optimizar.

En la pestaña HTML y CSS podemos señalar un bloque de la estructura y nos mostrara el código.





Aquí por ejemplo señalamos el div top banner que corresponde a id #topbanner en el archivo style.css. Si damos clic sobre el código css podemos modificarlo y esto vera reflejado en la web de manera temporal. La pestaña consola es la que nos permitirá ver y monitorizar las invocaciones de javascript y los errores en caso de fallo. En caso de error mostrara el archivos y el numero de linea de código donde se produce el error.





Firebug nos ayuda a encontrar objetos DOM rápidamente y luego editarlas sobre la marcha. Permite realizar Inspección del DOM.

El Document Object Model o DOM ('Modelo de Objetos del Documento' o 'Modelo en Objetos para la Representación de Documentos') es esencialmente una interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML y XML.


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 jul 11 2014 19:46
  •   Actualizado jul 11 2014 19:57
  •   Visitas 784