en Browser, Plugins

Firebug I: Introducción

Firebug es un complemento que no puede faltar en tu Firefox. ¿Qué no usas Firebug? ¿Cómo maquetas o desarrollas en front sin este plugin? Antes de contestar, descargate Firefox (si es que no lo tienes ya) y el complemento Firebug para Firefox. También te recomiendo una serie de complementos que añaden más potencia, aún si cabe, a Firebug:

  • Yslow: Analiza las páginas web y por qué van lentas basándose en las reglas de Yahoo! para los sitios web de alto rendimiento.
  • FireQuery: Es una colección de mejoras de Firebug cunado se usa jQuery.
  • Firecookie: Es una extensión para Firebug que permite ver y gestionar las cookies de tu navegador
  • FireRainbow: Sintaxis de Javascript resaltada para Firebug 1.3 + (Si usas Firebug 1.2: Rainbow for Firebug)

Firebug puedes editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web. Por ello es un plugin imprescindible para maquetadores y desarrolladores de front. Vamos a ver sus caracteristicas y más adelante haremos un análisis específico para maquetadores (HTML+CSS) y para desarrolladores de front (Javascript+jQuery).

  • Inspeccionar y editar HTML: Firebug facilita encontrar elementos HTML enterrados en la profundidad de la página. Una vez hayas encontrado lo que busca, Firebug te ofrece una gran cantidad de información, y te permite editar el código HTML en vivo.
  • CSS maquetación al pixel: La pestaña de CSS de Firebug te dice todo lo que necesitas saber acerca de los estilos de la  página web, y si no te gusta como está, puedes hacer cambios y verlos en el momento.
  • Ver CSS métrica: Cuando tus cajas en CSS no están alineadas correctamente puede ser difícil entender por qué. Deja a Firebug ser tus ojos y te medirá y te ilustrará todas los offset, los margins, los borders, los paddings y los tamaños.
  • Supervisar la actividad de la red: Tus páginas tardan en cargar, pero ¿por qué? ¿Te vuelves loco y escribes mucho código JavaScript? ¿Ha olvidado comprimir las imágenes? ¿Son tus servidores de anuncios los que se están echando una siesta? Firebug fracciona todo archivo por archivo.
  • Depuración y perfilador de JavaScript: Firebug incluye un potente depurador de JavaScript que te permite detener la ejecución en cualquier momento y ver el estado del mundo. Si el código es un poco lento, utiliza el perfilador de JavaScript para medir el rendimiento y encontrar rápidamente los cuellos de botella.
  • Encontrar rápidamente los errores: Cuando las cosas van mal, Firebug te permite conocer de inmediato y te proporciona información útil y detallada acerca de los errores en JavaScript, CSS y XML.
  • Explorar el DOM: El Modelo de Objetos del Documento es una enorme jerarquía de objetos y funciones que está a la epera de ser acariciada por JavaScript. Firebug te ayuda a encontrar objetos DOM rápidamente y luego editarlos sobre la marcha.
  • Ejecutar código JavaScript sobre la marcha: La línea de comandos es una de las herramientas más antiguas de la caja de herramientas de la programación. Firebug te da una buena línea de comandos para JavaScript con modernas comodidades.
  • Registo para JavaScript: Tener un fantástico depurador JavaScript es genial, pero a veces la manera más rápida de encontrar errores es sólo para volcar la mayor cantidad de información posible a la consola. Firebug te ofrece un conjunto de potentes funciones de registro que te ayudan a obtener respuestas rápidas.

Configuración de Firebug

Después de ver todas estas funcionalidades seguro que te hemos convencido y ya lo tienes instalado. Así que vamos a ver las opciones básicas de configuración para que puedas empezar a trabajar con este complemento de una manera cómoda y eficaz.

Opciones de FirebugHabrás visto que tras la instalación te aparece un pequeño escarabajo en gris en la barra de estado inferior. Cuando lo pulsas se colorea y aparece una ventana en la parte inferior del navegador. Para acceder a las opciones debemos pulsar el escarabajo de la parte superior izquierda de esta nueva ventana. Se desplegará el listado de opciones siguiente:

  • Abrir Firebug [F12]
  • Abrir Firebug en ventana nueva [Mayus+F12]
  • Open with editor
  • Tamaño del texto
  • Opciones
  • Firebug Online
  • Inspeccionar elemento [Ctrl+Shift+C | ⌘⇧C]
  • Perfilar Javascript [Ctrl+Shift+P | ⌘⇧P]
  • Linea de Comandos [Ctrl+Shift+L | ⌘⇧L]
  • Buscar [Ctrl+Shift+K | ⌘⇧K]
  • Customize shortcuts
  • About… (versión)

Te recomiendo que en el apartado Opciones selecciones las siguientes:

  • Shade box model: Cuando inspecciones elementos te mostrará el modelo de caja del elemento, coloreando de azul el contenido, de morado el padding y de amarillo el margin. Si la deshabilitas, simplemente te pondrá un borde azul en el elemento inspeccionado.
  • Enable Accesibility Enhancements: Te marca con un cadrado naranja la opción que tienes marcada, tal y como se ve en la foto anterior, donde está marcado el escarabajo
  • Activate Same Origin URLs: Con esta opción activa recordaremos el estado del Firebug mientras estemos en el mismo dominio. Si activamos Firebug en dominio.com también estará en dominio.com/folder y en foo.dominio.com.

Con estas nociones básica podeis investigar un poquillo las opciones que ofrece Firebug e ir familiarizandoos con este maravilloso plugin. En próximos artículos veremos como sacarle el máximo partido a Firebug en los diferentes entornos HTML, CSS y Javascript, así como las opciones que nos ofrecen los complementos para Firebug.

Cuentanos qué es lo que más te gusta de Firebug y cómo le sacas el máximo rendimiento. ¿Te gustaría compartir con nosotros de qué manera te ayuda Firebug en el día a día como frontend developer?

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)

  1. Firebug es una maravilla aunque reconozco que  a mi me da pereza. Yo, que maqueto «como los hombres valientes» (tecleando a pelo y visualizando crossbrowser), utilizo Web Developer para ayudarme.  En el trayecto desde maquetar con tablas hasta CSS3 vino a mi Web Developer y años llevo así. Actualmente incorporar FireBug en mi método casi me frena (aunque se consulta ocasionalmente).

    Reconozco, eso sí, que a mis compañeros desarrolladores (sobre todo los de BackEnd) FireBug les resulta más cómodo que Web Developer. A mi personalmente me frustra tener que hacer el cambio dos veces xD (en la preview de FireBug y despues en la Cascada).

    Felicidades por el sitio. Sindicado!

  2. Bueno, cada uno tiene su método de trabajo. Yo también empecé con Web developer toolbar y aún sigo usando ese plugin para algunas cosas. Pero para debuguear JS es el mejor plugin que han inventado. A ver si cuando publique el resto de entradas relacionadas con Firebug te termino de convencer y te animas a dar el salto.

    Esperamos seguir escribiendo artículos de tu agrado y nos propongas temas de los que te gustaría que habláramos. Un saludo,