Firebug para el navegador Firefox: dónde descargarlo, cómo instalarlo y cómo utilizarlo. Firebug es un complemento para Firefox y Chome. Instrucciones de uso

En esta lección veremos una magnífica adición. insecto de fuego para Firefox necesario para un webmaster. Le ayudará a encontrar y corregir el lugar correcto en el código HTML, así como a buscar y editar estilos CSS. Al mismo tiempo, todo el proceso de búsqueda y corrección aumenta significativamente. Una extensión para Firefox llamada Firebug puede hacer todo esto. Echemos un vistazo más de cerca.

Instalación de Firebug para Firefox

Puede instalarlo desde el sitio web del desarrollador http://firebug.ru/. Todo se hace de forma sencilla. A la derecha vemos el botón "Instalar Firebug".

Hacemos clic en él y somos enviados a la página addons.mozilla.org.

También puedes verlo si vas al menú “Herramientas – Complementos – Extensiones” en Firefox.

insecto de fuego- no es solo un complemento del navegador que amplía sus capacidades, sino como lee en el sitio web del desarrollador Firebug es la evolución del desarrollo web. Y esto es cierto.

Cómo utilizar Firebug para Firefox

Para iniciar el complemento Firebug, simplemente haga clic derecho en el fragmento del sitio que nos interesa y en el menú desplegable haga clic en "inspeccionar elemento usando Firebug"

Después de esto, se abrirá una ventana del complemento Firebug en la parte inferior de la página con el código HTML responsable de esta sección particular del sitio. El sitio en sí está resaltado en azul, como en la foto de abajo. Precioso ¿no? Pero esas no son todas sus capacidades.

Puede realizar cambios en el código HTML y ver el resultado inmediatamente. Cabe señalar que los cambios serán visibles solo mientras la ventana de Firebug esté abierta, es decir, no afecta el recurso en el sitio en sí. Puedes experimentar con el archivo CSS de la misma manera. Cambiar el color o tamaño de la fuente, etc. Hablaré de esto con más detalle a continuación.

Entonces, ha determinado qué sección del código necesita y debe cambiarla no solo visualmente sino también físicamente. ¿Pero cómo hacer esto? Primero, debe determinar en qué archivo PHP Joomla 2.5 buscarlo. Firebug no es nuestra ayuda aquí, pero nos dirá qué buscar al realizar una búsqueda.

Recomiendo usar una clase ID o CSS en contenedores. Un contenedor es lo que está encerrado entre etiquetas DIV. Cómo buscar se describe en la sección Buscar por archivos en Total Commander. No todo saldrá bien de inmediato. Sin embargo, aquí no existe una “píldora única”. Como regla general, tendrás que editar el código en la plantilla Joomla. Los diferentes desarrolladores de plantillas tienen sus propias reglas para nombrar clases e ID de CSS.

Usando Firebug para editar CSS

Como ya habrás notado, la ventana derecha del complemento describe los estilos CSS responsables del diseño del bloque HTML del bloque en estudio. Como dije anteriormente, también puedes experimentar con ellos sin dañar el sitio, ya que todos los cambios desaparecerán después de cerrar Firebug. Cuando pasas el cursor sobre una regla CSS, aparecerá un círculo gris con una línea que lo atraviesa. Al hacer clic con el mouse, desactiva esta regla y los cambios serán inmediatamente visibles en el sitio.

Puede ingresar sus valores y ver cómo se ve. Esto es muy importante al editar una plantilla de Joomla 2.5, ya que estoy seguro de que no todo lo que contiene esta plantilla le conviene.

Y así, hemos seleccionado el valor deseado y visualmente todo está bien, pero ahora dónde buscar el archivo o archivos CSS que necesitamos.

Aquí todo es mucho más sencillo. Esto muestra el nombre del archivo CSS y la línea donde se encuentra esta regla.

Si no recuerda dónde se encuentra este archivo en la plantilla o puede haber varios, puede encontrar la ruta haciendo clic en el nombre del archivo, abriéndolo en una nueva pestaña del navegador y mirando la ruta. allí.

Medir la velocidad de carga del sitio usando Firebug

La velocidad de carga del sitio web es un factor muy importante. Puede comprobar este indicador en servicios de terceros en Internet, pero también puede comprobarlo mediante un complemento. Firebug para Firefox.

Haga clic en el botón "Red" en la ventana del complemento y actualice (F5) nuestra página abierta y vea el resultado. A continuación trabajamos especialmente con elementos de frenado.

Y finalmente, quiero señalar que este complemento puede funcionar con un sitio tanto alojado como ubicado en servidor local Denver (Denwer) .

Buena suerte para ti en tus esfuerzos.

¡Buenos días, queridos lectores del sitio!

es una de las herramientas más útiles para un webmaster. Con su ayuda, puede resolver muchos problemas, por ejemplo, puede ver la estructura de un sitio (es difícil mirar el código fuente, pero con este programa puede ver la estructura de los elementos fuente: qué elemento muestra qué es inmediatamente visible) o editar páginas web directamente en tiempo real. Firebug para Firefox nos permite cambiar (html, CSS, etc.) directamente en el navegador y ver inmediatamente el resultado de nuestras acciones, aunque en realidad el código en sí en el servidor no ha cambiado. Aún más sencillo: por ejemplo, debes cambiar el tamaño de fuente en el título de la publicación. Usando Firebug, simplemente seleccionamos el texto que necesitamos con el mouse, el elemento correspondiente se resalta e inmediatamente podemos realizar cambios en el tamaño de fuente y ver inmediatamente el resultado. Observamos cómo se ve la página web y luego hicimos cambios en el código correspondiente. ¿Cómodo? ¡Palabra equivocada!

Este complemento, como complemento, está disponible en diferentes versiones. Entonces puede instalarlo en el navegador Chrome (cómo instalar Chrome está escrito en el artículo, configurarlo y funcionar. Lea cómo instalar este complemento para Chrome), o podemos considerar esta opción.

Cómo instalar el complemento Firebug para Firefox

Abra Mozilla Firefox (naturalmente ya está instalado en nuestra computadora), puede descargar Firebug para Firefox usando

Pulsa el botón verde +Agregar a Firefox.

Tenga en cuenta que el botón Instalar está deshabilitado. Para activarlo, haga clic en la entrada (indicada por la flecha) y luego haga clic en Instalar.

Todo. la aplicación está instalada. En la esquina superior derecha vemos un error gris.

Y gris porque está inactivo, es decir. no incluido. Si la extensión está instalada, no podremos leer la siguiente sección; vea cómo usarla.

________________________________________________________________________

Opción, si el navegador Firefox aún NO está INSTALADO en la computadora. Primero, descargue la extensión Firebug desde el navegador Chrome y luego instale Firefox.

Primero, vaya al sitio web de complementos. Se abre la página de descarga.

Presione el botón Descargar ahora. Se abre una ventana.

¿Quieres aprender más sobre Firefox? haga clic en el botón correspondiente. Pero haremos clic en el enlace. subir de todos modos . El complemento se está cargando.

En la esquina inferior izquierda del navegador Firefox vemos el archivo descargado. Este archivo (los números en el nombre pueden diferir, ya que esta es la versión actual en el momento de escribir este artículo). Instale el navegador Firefox y luego agréguele la extensión Firebug descargada.

——————————————————————————

Cómo utilizar Firebug

Primero necesitas activarlo. Esto se hace así:

— haga clic izquierdo en el icono de error en la esquina superior derecha del navegador: ya sea

- usar teclas de acceso rápido para llamadas F12.

Se abre el área de trabajo (encerrada en un círculo rojo).

Comencemos a analizar el sitio (sitio de ejemplo). Primero, haga clic en el icono en el área de trabajo (ubicado a la derecha del error).

Ahora, si mueve el mouse por el sitio, las áreas se resaltarán y debajo estará el código que muestra esta área en la página web.

Ejemplo de uso del complemento Firebug

Veamos un ejemplo específico: observe el código del título del artículo y cambie su color en tiempo real. Abrimos la página web y vemos un artículo llamado Programa para leer archivos PDF - Stduviewer. Inicié el programa (presioné F12) y moví el mouse a este encabezado

En el área de trabajo a continuación vemos que el código es responsable de la salida de este elemento:

Lector de PDF - Stduviewer

Y en la misma área de trabajo a la derecha vemos CSS:

A, a:enlace, a:visitado, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visitado, #presentación de diapositivas .post-title a (

}

Puede ver que el título del artículo se muestra con el color #265076. Probemos, ¿cómo quedará el título con este color #00FFFF? Para hacer esto, seleccione #265076 en el área de trabajo y escriba #00FFFF en lugar de este color y vea el resultado.

El color del título ha cambiado. Pero el hecho es que el código en sí no ha cambiado en el servidor y es necesario realizar cambios manualmente en el código CSS.

De esta manera puedes editar cualquier elemento de código y ver el resultado de la edición. Vale la pena decir que las capacidades del depurador web superan con creces las descritas en el artículo; esta extensión tiene una gran cantidad de posibilidades.

¡Buena salud a todos los lectores de mi blog! Hace tiempo que quería abordar el tema del uso de extensiones en beneficio de los webmasters y ahora, finalmente, presento una descripción de la funcionalidad de una de las más populares, a saber, Complemento Firebug. Por cierto, si aún no ha hecho su elección final a favor de un navegador web, quizás el material sobre los navegadores más populares () le ayude.

Debo admitir que como herramienta para webmaster prefiero Google Chrome (), que me parece más rápido y funcional, y también lo uso cuando navego por Internet. Aunque, quizás, la fuerza de la costumbre tenga una importancia importante a la hora de elegir un navegador para trabajar con un sitio.

Este poder a veces va en contra de los beneficios obvios que nos brindan las opciones alternativas, pero con el complemento Firebug fue una historia diferente e inmediatamente comprendí su valor como una herramienta esencial para los webmasters.

Dónde descargar y cómo instalar la extensión Firebug para Firefox

Y a pesar de que herramientas similares a este complemento ahora están disponibles en otros navegadores populares (por ejemplo, in o in), Firebug sigue siendo una prioridad para mí, porque en algunos aspectos es más conveniente y funcional. ¿Qué tiene de bueno este complemento?

En primer lugar, le permite buscar y editar los elementos y el código necesarios "sobre la marcha". Esto es especialmente útil para los webmasters novatos, ya que les permite editar bloques de páginas incluso sin el conocimiento adecuado de los lenguajes de marcado de hipertexto (HTML) y las hojas de estilo en cascada (CSS).

Ahora veamos cómo instalar Firebug. Puedes descargar el complemento desde la página oficial, donde puedes encontrar la última versión. Además, es mucho más fácil instalar esta extensión usando Masila directamente. En este caso, si mueves el cursor sobre el enlace a la última versión (que es la que debes descargar), aparecerá un botón verde “+Agregar a Firefox” a la derecha del mismo. Al hacer clic en este botón se iniciará directamente la instalación. Después de esto, debes reiniciar tu navegador para activar la extensión.

Si está utilizando cualquier otro navegador web, aparecerá a la derecha un botón “Descargar ahora” del color del mouse, en el que deberá hacer clic. Después de esto, aparecerá un cartel con los enlaces “Más información sobre Firefox” y “Descargar de todos modos”. Siguiendo el primer enlace, recibirá información adicional sobre el navegador; si hace clic en el segundo, aparecerá una ventana de descarga estándar, donde recibirá una oferta para guardar el archivo en su computadora. Seleccione la ubicación donde colocar el archivo y haga clic en "Guardar". Entonces comenzará el proceso de descarga estándar.

Una vez que termine de descargarse, abra Firefox, haga clic en "Archivo" - "Abrir archivo" en la esquina superior izquierda. Busque la ubicación en el disco duro de su computadora donde ha ubicado el archivo descargado y actívelo. Comenzará la instalación, después de lo cual deberá reiniciar el navegador. Después de reiniciar, en la esquina superior derecha del navegador Firefox verás la imagen de un escarabajo, que es el símbolo de Firebug. Esto significa que el complemento está instalado y listo para usar.

Ese es todo el proceso de descarga e instalación. Como puedes ver, no hay nada complicado. Ahora te diré cómo usar el complemento Firebug. Por supuesto, el énfasis principal estará en aquellas funciones que más necesita un webmaster y que yo mismo uso. Lea más atentamente y trate de comprender; Créame, estas herramientas hacen la vida de un webmaster mucho más fácil.

Cómo utilizar el complemento Firebug para editar código HTML

Diré de inmediato que Firebug puede hacer mucho. La opción más necesaria, de la que probablemente ningún webmaster pueda prescindir, es la posibilidad de editar los parámetros HTML y CSS directamente en la ventana del navegador web, mientras observa cómo cambia el elemento correspondiente.

Entonces, dé vida al complemento haciendo clic en el ícono del escarabajo y se abrirá una ventana en la parte inferior, cuya ubicación se puede cambiar como desee, simplemente arrastrándola (para hacer esto, mueva el cursor del mouse hacia el borde superior de la ventana de Firebug hasta que tome la forma de una doble flecha y, manteniendo presionado el botón izquierdo del mouse, arrastre el borde hacia arriba y hacia abajo.)

Además, al hacer clic en el botón rojo de la izquierda puede minimizar la ventana, al hacer clic en el del medio puede abrir la extensión en una ventana separada, al hacer clic en el de la derecha puede desactivar el complemento Firebug. Ahora veamos cómo se ve la ventana del complemento en el navegador Firefox:

En el lado izquierdo está la estructura HTML, en el derecho están los elementos de la hoja de estilos en cascada CSS. Ahora una breve excursión a los conceptos básicos del lenguaje de marcado de hipertexto. El hecho es que los profesionales experimentados en su campo (diseño de bloques), utilizando contenedores (usando una etiqueta div), especifican el contenido deseado de un área particular de la página web. Pero la apariencia de un elemento de diseño está diseñada para ser determinada por hojas de estilo.

Además, se utiliza el principio de anidamiento, es decir, los contenedores más grandes pueden contener varios elementos. Como puede ver en el ejemplo de la captura de pantalla, para expandir este o aquel elemento, debe hacer clic secuencialmente en el signo más a la izquierda al lado de tal o cual fragmento HTML y recibirá secuencialmente bloques anidados uno dentro del otro.

Si mueve el cursor del mouse a uno u otro elemento de la estructura HTML, al mismo tiempo, aquellas áreas de la página que corresponden a este fragmento de código se colorean con un tinte muaré y luego puede ver qué elementos están incluidos en este recipiente. Por ejemplo, en la captura de pantalla anterior, dicha área es uno de los elementos del menú superior. Además, si hace clic en una línea específica de HTML, las reglas CSS que coinciden con ese elemento se mostrarán en la mitad inferior derecha.

De esta manera, directamente en la ventana de Firebug, puedes experimentar con diferentes áreas de la página en el navegador, editándolas como desees hasta lograr el resultado deseado. Además, la gran ventaja de este método es que puede hacerlo con un conocimiento mínimo de marcado de hipertexto y hojas de estilo en cascada.

Además, es posible realizar experimentos similares con cualquier página web de cualquier recurso, sin preocuparte en absoluto de que estropees algo, ya que todos estos cambios no se guardarán y al recargar la página todo volverá a su estado anterior. forma. Si, por ejemplo, le gustó algún recurso en Internet, puede experimentar con una de sus páginas para descubrir qué opciones de marcado y qué valores de estilo se utilizan allí.

De esta manera, sabrá qué línea de documento HTML o qué propiedad CSS debe cambiarse para obtener el resultado deseado. Además, por conveniencia, la línea superior muestra contenedores anidados secuencialmente en los que se incluye este elemento:

De nuevo, si pasas el cursor del ratón sobre estos contenedores, los elementos que los componen también aparecen coloreados. Como puede ver, las capacidades de Firebug ahorran mucho tiempo a la hora de dejar su proyecto en perfectas condiciones, e incluso un webmaster novato puede hacerlo.

Pero eso no es todo. La extensión tiene una función que te permite realizar acciones opuestas a las descritas anteriormente. Es decir, si mueve el cursor del mouse sobre la página, los elementos HTML en la ventana del complemento Firebug se volverán azules:

Para implementar esta función, debe hacer clic en la flecha oblicua. Ahora pasa el ratón sobre la página, y en la parte inferior izquierda observarás cómo las secciones correspondientes de HTML, encargadas de crear los elementos de la página, están encerradas por una extensión en un marco.

Ahora puedes ir al lado izquierdo de la ventana de la extensión Firebug para comenzar a editar directamente. Te lo mostraré con un ejemplo específico. Para cambiar tal o cual elemento, por ejemplo, la posición de la barra de navegación superior de mi blog, cambiaré el ID de una de las etiquetas. div. Para hacer esto, muevo el cursor al contenedor seleccionado: