10 razones por las que deberías usar Firebug

Firebug es una de las herramientas más populares utilizadas por los desarrolladores web. En este artículo, analizaremos diez de sus características más atractivas..

1. consola

Lo primero que notará cuando abra Firebug (ya sea desde el
barra de estado o usando la combinación de teclas ctrl + F12) será el panel de la consola. Después de un vistazo rápido, uno podría pensar que es una versión alternativa de la Consola de errores
(Ctrl + Shift + J). Las características comunes entre los dos son:

• Registro de errores, avisos y avisos.
• Capacidad para ejecutar código Javascript

Pero Firebug amplía la funcionalidad de Firefox para que pueda hacerlo.
mucho más, como:

• errores de registro para Javascript, CSS, XML, XMLHttpRequest (AJAX) y
  Chrome (internos de Firefox)
• ejecutar código Javascript en la página web actual
• Objeto Javascript adicional se pone a disposición (consola)

Veamos algunos ejemplos construidos sobre el objeto consola. Imagina correr el
siguiente archivo HTML.

Esto generará el siguiente resultado..

2. HTML

El segundo panel, y en el que estoy seguro de que vas a gastar mucho
de tiempo, se divide entre varias secciones que revisaremos a continuación.

1. Este botón es equivalente al "Elemento de inspección" en una página web
   Menú de contexto. Además de ser útil con la rápida selección de elementos en la página.,
   también describe el elemento seleccionado actualmente.
2. En esta sección, tenemos la jerarquía de los actuales
   elemento seleccionado y la capacidad de realizar una serie de acciones (en cada
   componente individual de la jerarquía), como:
   • copiando HTML interno
   • creando expresiones XPath
   • adjuntar un observador de eventos (e iniciar sesión en el panel de la consola)
   • elemento de borrado
   • Elemento de edición y nodos secundarios.
   • Moviendo el elemento en la pestaña DOM para inspección
3. La ventana principal del panel; Útil para atravesar el
   Documento HTML, modificación rápida de código y localización de código roto (como
   cerrando un div demasiado pronto). El menú contextual ofrece el mismo conjunto de funcionalidades.
   como la sección nr. 2
4. En esta sección, el estilo calculado de la página o elemento actual es
   desplegado. La capacidad de modificar activamente los estilos e inspeccionar CSS
   La herencia son sus características más valiosas..
5. A través de esta sección se puede examinar fácilmente el modelo de caja.
   un elemento: tamaño del contenido, relleno, compensaciones, márgenes y bordes.

6. La sección DOM al acceder genera una lista con todos los datos actuales.
   Elementos seleccionados, métodos y propiedades..

3. CSS

La principal diferencia entre este panel y la sección de Estilo en HTML es
Que aquí puedes trabajar en estilos no computados. Resumiré y numeraré las secciones.
(y características esta vez).

1. Si la página en la que estamos trabajando contiene varias hojas de estilo, entonces podremos seleccionar la hoja de estilo deseada..
2. La región principal donde se muestra el código CSS.
3. Modificar fácilmente las propiedades CSS.
4. Reglas de CSS fácilmente desechables.

4. Script

A veces, al escribir código Javascript, tienes que conseguir tus manos.
sucio. La mayoría de las veces, te encontrarás trabajando con
Panel de consola; Solo en condiciones extremas eso te hará saltar al Script.
panel. Dadas esas condiciones extremas (que deben suceder), revisemos este panel y empecemos a familiarizarnos con él..

1. Botón desplegable desde el que podemos seleccionar el archivo de script deseado..
2. Funciones de depuración: continuar, paso, paso por encima
   y salir. Sólo se activan cuando la ejecución del código alcanza un
   punto de quiebre.
3. Ventana principal. Aquí establecemos (y eliminamos) puntos de interrupción, así como también inspeccionamos
   Código Javascript.
4. Al igual que en el panel DOM, la sección Reloj imprime métodos de objetos
   y parámetros para el código de depuración actual.
5. Muestra el apilamiento de funciones en tiempo real..
6. Lista de puntos de interrupción activos actualmente. Solo se puede hacer la eliminación del punto de interrupción.
   de aquí.

5. DOM

Lo mismo que HTML-> DOM. Dado que nada difiere de lo que se mencionó anteriormente, pasaremos a la siguiente sección..

6. neto

¿Curioso cuánto tardó en cargarse tu página? O tu
¿Quieres saber qué solicitud lleva más tiempo para completar? Afortunadamente, esto también se puede lograr a través del panel de red.

1. Las solicitudes pueden ser filtradas según su tipo..
2. Cada solicitud se muestra en esta sección. Al final de la lista de solicitudes.
   Vemos un resumen de ellos: número de solicitudes, tamaño, cuánto se almacenó en caché
   Ya y el tiempo total que tomaron para completar.
3. Se pueden revelar más detalles, como: encabezados HTTP, respuesta y caché (igual
   como respuesta)

Pruebas de rendimiento

¿Necesita probar el rendimiento de una función o bucle específico? Utilice la función de "temporizador" de Firebug.

 función TimeTracker () console.time ("MyTimer"); para (x = 5000; x> 0; x -)  console.timeEnd ("MyTimer"); 

Tres pasos. Comenzamos llamando a "console.time" y pasamos una clave única. A continuación, insertamos nuestro código. Finalmente, llamamos console.timeEnd, y una vez más, pasamos nuestra clave única.

7. Referencia

Este es un panel adicional proporcionado por CodeBurner, un Firebug
Añadir. Como su nombre lo indica, a través de este panel tendrá acceso rápido a su HTML
y el código CSS. Incluso si el panel se explica por sí mismo, seguiremos revisando
eso.

1. La sección de búsqueda y filtrado..
2. Aquí los resultados se apilan, en nuestro caso solo hay un resultado..
3. Panel de compatibilidad para las últimas versiones principales del navegador. Si chrome es
   no en esta lista, pero Chrome usa el mismo motor que Safari, a saber, Webkit, así que si
   Es compatible con Safari. Funcionará también en Chrome..
4. Y si la información que se muestra en este panel no es suficiente, puede encontrar más información accediendo a este enlace, como: ejemplos, compatibilidad en más navegadores
   versiones, descripcion, etc.

8. PixelPerfect

Si alguna vez ha realizado el corte de PSD, sabe cuánto tiempo consume la medición.
El espaciado entre los elementos de composición puede ser. Ahí es donde PixelPerfect prueba que es
poder. Tener este complemento en tu caja de herramientas te ayudará a realizar la rebanada perfecta.

1. Con este botón podemos agregar múltiples imágenes de superposición para la página actual.
2. Lista de superposiciones, desde aquí aplicamos o eliminamos la superposición..
3. Sección de ajustes de superposición.

9. YSlow

Otro complemento de Firebug desarrollado por Yahoo !, que puede sugerir mejoras de velocidad
Basado en una serie de pruebas realizadas..

A través de YSlow, podemos calificar el rendimiento general de nuestro sitio web. Podemos fácilmente
problemas puntuales que pueden mejorarse, y una serie de recomendaciones están disponibles
también.

Además de las estadísticas del gráfico circular, también tenemos a nuestra disposición JSLint y Smush.it.

10. FirePHP

Nuestro último, pero no menos importante, componente de Firebug es FirePHP. Con este
complemento, podemos enviar información de forma transparente (advertencias, errores, registro, información)
al panel de la consola desde nuestro código PHP. Ejemplo de uso del sitio web de FirePHP:

Clausura

Espero que esta pequeña lista de paneles / complementos Firebug haga de su vida un
La persona de la web más fácil - como lo hizo conmigo. Al final, todos sabemos que
los errores están destinados a suceder, por lo que no hay excusa para no estar preparado.

Siga estos enlaces para descargar los complementos:

• Firebug,
• CodeBurner,
• PixelPerfect,
• YSlow
• FirePHP