Читать книгу Desarrollo y reutilización de componentes software y multimedia mediante lenguajes de guión. IFCD0210 - José Raúl Aranda Córdoba - Страница 33

A continuación, se explicará cómo proceder a la instalación, configuración y uso de un plugin de gran utilidad en el desarrollo web: Firebug.

Para instalarlo, hay que acceder a la página oficial de plugins o complementos del navegador, o a la página oficial del plugin <http://www.getfirebug.com> e instalarlo.

Una vez instalado, debe aparecer en el menú, como indica la siguiente imagen.

Botón Firebug

Al pulsar el botón de Firebug aparece una nueva ventana situada en la parte baja del navegador.

Terminal que se muestra cuando se ejecuta Firebug

A continuación, se describen las opciones más importantes.

Botón Opciones de Firebug

Al presionar el botón Opciones de Firebug, situado en la parte izquierda de la barra de menú, aparece un menú contextual en el que se pueden elegir varias opciones:

Opciones de Firebug

Este menú permite ocultar Firebug, desactivarlo, cambiar su posición, configurar un editor, cambiar el tamaño del texto y modificar sus opciones de configuración.

Preferencias Firebug

Este submenú opciones permite mostrar el número de errores, consejos e información rápida entre otros.

Botón Inspeccionar elemento

Cuando se selecciona este botón, el elemento u objeto seleccionado en la página web será resaltado con un borde de color azul. A medida que el puntero se mueva a través del navegador, se observará el código fuente y las reglas de estilo CSS del elemento sobre el que se encuentre.

Botón Inspeccionar elemento

Objeto seleccionado

Si no se encuentra o no se conoce el código que se busca, el botón Inspeccionar elemento puede ayudar a identificarlo.

Botones Volver y Avanzar

Cuando se navega por las distintas pestañas de opciones de Firebug, es posible usar los botones Volver y Avanzar para trasladarse a la pestaña seleccionada con posterioridad o anterioridad.

Botones Volver y Avanzar

Pestaña Consola

En esta pestaña aparecerá toda la información referente a la carga de JavaScript, ya que muestra los errores, la información y las advertencias, entre otras opciones.

Pestaña Consola con sus distintas opciones

Pestaña HTML

Al seleccionar esta pestaña, se muestra el código HTML que contiene la web. La estructura aparece anidada en forma de árbol, y permite ir abriendo o cerrando los distintos tags o etiquetas que componen el código. Si se utiliza el botón Inspeccionar, automáticamente aparecerá el código correspondiente al elemento seleccionado. En la parte derecha se pueden observar las reglas de estilo CSS aplicadas directa o indirectamente al código o elemento seleccionado.

Nota

Navegar por el código HTML tiene el mismo resultado que utilizar el botón Inspeccionar elemento, solo que es necesario ir abriendo o cerrando el árbol de código.

Pestaña HTML

Una vez se obtiene el código deseado, ya sea en la parte de HTML o en CSS, es posible modificar sus propiedades e incluso añadir otras. Para ello, será necesario posicionarse con el ratón sobre el código a modificar, y clicar con el botón izquierdo del ratón. Se seleccionará dicho código de forma automática y podrá ser editado directamente.

Modificando código HTML

También es posible eliminar reglas de estilo CSS e incluso añadir otras nuevas, todo ello en tiempo real.

Modificando código CSS

Sabía que...

Al añadir nuevas reglas de estilo CSS, al mismo tiempo que se está escribiendo la nueva propiedad, Firebug puede servir de ayuda con la función de auto completado. Tan solo es necesario escribir la primera palabra y, con las teclas flecha arriba y abajo, buscar la que se necesita. Si la regla se ha definido de forma errónea, se marcará de un color rojo, mientras que si se ha definido de forma correcta, se marcará de color verde.

Pestaña CSS

En el apartado anterior, se ha visto una forma de poder visualizar el código CSS de un sitio web desde la pestaña HTML e incluso se ha aprendido a modificarlo. Al seleccionar la pestaña CSS, es posible ver la totalidad del código CSS.

Pestaña CSS

Pestaña Script

En esta pestaña se puede controlar todo lo referente al código JavaScript, desde inspeccionar un determinado elemento, hasta ejecutar una determinada línea, crear un punto de interrupción, depurar código, etc.

Pestaña Script con un punto de interrupción

Pestaña DOM

En esta pestaña se puede ver toda la estructura de objetos que ha generado el navegador cuando carga una página web. A este tipo de estructura se le denomina jerarquía de objetos del navegador.

Objetos generados por el navegador

Nota

DOM es una abreviatura de Document Object Model (Modelo de Objeto de Documento).

Pestaña Red

En esta pestaña se puede analizar el tráfico que genera la web, y ver los tiempos de carga de cada elemento. La pestaña Red informa de la URL, estado, tamaño, línea de tiempo, etc.

Pestaña Red

Importante

Es importante analizar los tiempos de carga y el peso de las distintas imágenes, ya que cuanto menos tamaño tengan las imágenes, más rápido cargará el sitio web.

Pestaña Cookies

En la pestaña Cookies se puede inspeccionar y manipular las cookies que tenga el sitio web. Esta pestaña muestra información del nombre, valor, tamaño, expiración, etc.

Pestaña Cookies

Actividades

5. Instalar Firebug en el navegador Firefox.

6. Definir la pestaña Consola, CSS, Script, Dom y Red de Firebug.

7. En la pestaña CSS, probar a cambiar alguna característica y ver cómo se cambia al mismo tiempo en el navegador.