Firebug, extensión gratuita de Firefox. Analizar HTML, CSS, JavaScript, etc. (programadores y diseñadores web)

Resumen: Este artículo da a conocer y explica una de las extensiones gratuitas para el navegador Firefox, con la que los creadores y diseñadores de webs pueden analizar y depurar el código cargado en el navegador.
Codificación aprenderaprogramar.com: DV00401A

 

 

INTRODUCCIÓN

Para los no iniciados, explicaremos que la tecnología web se basa en la conocida arquitectura cliente-servidor, donde un servidor (remoto) envía archivos al navegador cliente (en nuestra casa u oficina). Estos archivos al ser cargados por el navegador componen la página a mostrar. Firebug  es una herramienta muy interesante para los programadores y desarrolladores webs.

 

Firebug es una extensión del navegador Firefox que nos permite editar webs y hojas de estilo, monitorizar tiempos de carga, depurar javascript y ver los errores en la página además de explorar el DOM. DOM es el acrónimo de “Modelo en Objetos para la representación de Documentos”, aunque ésta es una mala traducción. El DOM es el árbol jerárquico con todos los elementos que forman una página web y su representación gráfica se asemeja a un organigrama.

 

 

Instalación

1.   Lo primero que tenemos que hacer si no lo tenemos instalado es descargar e instalar el navegador Mozilla Firefox desde su página oficial que es la siguiente:   http://www.mozilla-europe.org/es/firefox/

 

Una vez instalado Firefox lo abrimos y en internet buscamos la página desde la que podemos descargar esta extensión (plug-in). Para localizar la página de descarga bastará con buscar en Google “add Firebug”. Al igual que los navegadores, las extensiones también tienen versiones. Indicamos a continuación el link de la última versión de Firebug: https://addons.mozilla.org/es-es/firefox/addon/firebug/

Hay que tener en cuenta que cada versión del navegador Firefox soporta sólo determinadas versiones de una extensión como Firebug. Como regla diremos que la última versión de Firefox soporta la última versión de Firebug, así que si estamos instalándolo todo nuevo no habrá problema. Si ya tenías instalado el navegador, comprueba en la página de descarga la compatibilidad. Por ejemplo, en el caso de Firebug 2.0 nos dice que funciona con Firefox 30 a 32. Si por ejemplo tenemos Firefox 29 deberíamos instalar la versión 1.12 de Firebug.

 

 

Una vez que estemos en la página le daremos a instalar y siguiendo el proceso  Firebug se instalará sobre Firefox. Una vez terminado sólo tenemos que reiniciar el navegador cerrándolo y abriéndolo de nuevo.

 

 

Cómo trabajar con Firebug

Una vez lo tengamos instalado sólo tenemos que pulsar sobre el icono de Firebug que aparece desactivado en la parte inferior derecha o superior derecha del navegador. El icono es una imagen de una especie de escarabajo. Si tenemos algún problema para encontrarlo también podemos hacer click con el botón secundario del ratón sobre cualquier parte de la página web y en el menú que nos aparecerá, elegir la opción “Inspeccionar elemento con Firebug”. En la parte inferior de la pantalla aparecerá una ventana (el Firebug) dándonos información sobre el elemento de la página web que elijamos o en el que estemos posicionados. En concreto nos aparecerá el código del elemento inspeccionado: este código (HTML, CSS, etc.) son las instrucciones que recibe el computador para que algo se muestre de una determinada manera.

 

 

Pulsando sobre el icono de inspeccionar (icono con una flecha azul) podemos ir recorriendo las distintas partes que forman la página y viendo el código asociado: a través del código podemos identificar colores, tamaños de letra, jerarquías de un elemento dentro de la página, descripción y ruta de una imagen, etc. Por ejemplo si pinchamos sobre una imagen podemos ver como código: “<img height="360" width="539" alt="20 ordenador contra programador.jpg" src="/images/satsumagallery/ Como empezar/20_ordenador_contra_programador.jpg"/>, lo cual nos está informando del tamaño en pixeles, la descripción de la imagen, el nombre del fichero, etc.

Una vez desplegado el Firebug vemos que posee una barra de herramientas  principal donde algunos elementos aparecerán desactivados. Para activarlos sólo tenemos que pulsarlos y darles a activar (habilitar o deshabilitar).

 

 

Podemos encontrar manuales sobre el Firebug en la web, por citar algunos http://www.w3resource.com/web-development-tools/firebug-tutorials.php (están en inglés). Como pasa con todos los buenos plug-in se le han desarrollado y van desarrollando nuevas funcionalidades de las que podemos informarnos en el sitio web del proyecto http://getfirebug.com.

 

Referencias en la web:

Sitio web de los desarrolladores: http://getfirebug.com/          

Tipo de Software: Código abierto y gratuito.

 

 

 

 

 

 

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación