Categories

Firebug. Mozilla Firefox plugin

Rating: 4.0/5. From 3 votes.
Please wait...

Firebug es un plugin para Mozilla Firefox que se puede utilizar para examinar el código fuente del sitio web, modificar CSS y revisar los errores de página web.

Se puede descargarlo en el sitio web oficial http://getfirebug.com/. Haga clic en el botón Install Firebug en la página web para instalar el plugin.

Después de la instalación deberá ver el icono de error en la esquina inferior derecha de su navegador.

Si no puede ver el icono, hay que asegurarse de que su barra Add-on está activada. Abra View > Toolbars > Add-on o presione CTRL+/.

Para abrir la ventana de Firebug, haga clic en su icono. Se aparecerá el área de trabajo de Firebug:

 

Examinar el código HTML

Examinación del código HTML le ayuda a encontrar los elementos que desea modificar. Le muestra las etiquetas HTML, clases de etiquetas y el contenido.

  1. Haga clic en el icono de Firebug en la esquina inferior derecha de la ventana del navegador
  2. Haga clic en el botón Inspect (Examinar)
  3. Elija el elemento que desea examinar

 

Siéntase libre de revisar el video tutorial:

Firebug html markup

 

Modificar estilos CSS

La modificación de estilos CSS a través de Firebug le permite observar cómo sus cambios afectarán su sitio web, entender que atributos de estilo son asignados a cada elemento y como se puede cambiar ellos.

  1. Haga clic en el icono de Firebug en la esquina inferior derecha de la ventana del navegador
  2. Haga clic en el botón Inspect (Examinar)
  3. Elija el elemento que desea examinar
  4. En la columna derecha de la pantalla de trabajo de Firebug modifique los estilos CSS.

 

Nota que Firebug también muestra la línea en el fichero CSS donde se puede encontrar la clase de elemento. También si elija el nombre del fichero CSS le mostrará el directorio donde se encuentra este fichero.

Los cambios realizados en Firebug no se guardarán. Sólo se puede observar cómo los cambios afectarán a su navegador. Para guardar los cambios por favor, cambie los ficheros .HTML y .CSS.

 

Siéntase libre de revisar el video tutorial:

Firebug edit css

 

Revisar errores

A veces, al instalar la plantilla puede encontrar que algunas características no funcionan. Sin las herramientas de desarrollo es difícil encontrar la causa del problema. Firebug plugin le ayudará a encontrar y resolver el problema. Si hay algún error en su sitio web – el plugin va a mostrar ellos en la esquina inferior derecha.

 

Abra la ventana de Firebug y active la consola. Asegúrese de que opciones Show JavaScript Errors (Mostrar errores de JavaScript) y Show Network Errors (Mostrar errores de red) están activadas. Luego actualice la página web.

Firebug le mostrará todos los errores de página web y algunos consejos sobre la manera de resolverlos.

La mayoría de los errores tienen los códigos de error. En las capturas de pantalla se puede ver el error 404. Esto significa que los ficheros especificados faltan. Trate de subir ellos de nuevo.

También puede utilizar Net tab para ver los ficheros que causan errores. Los errores están marcados con el rojo.

 

 

Siéntase libre de revisar el video tutorial:

Firebug trace errors

 

Esta entrada fue publicada el Herramientas de Desarrollador, Desarrollo de Sitio web y etiquetada css, developer, error, firebug, HTML, mozilla firefox, tool, trace. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket