Hogar › Teléfono › Extensión Firebug para Firefox. Características y funciones clave. Cómo instalar el complemento Firebug para Firefox

Extensión Firebug para Firefox. Características y funciones clave. Cómo instalar el complemento Firebug para Firefox

Saludos. Hoy quiero hablarte de complemento gratuito Firebug, sobre cómo hacerlo bien descargar e instalar Firebug en Firefox, así como en forma corta Describiré todos los beneficios de este complemento para webmasters. este componente Ayuda a un webmaster novato a diseñar nuevas plantillas, cambiar las antiguas, corregir errores en el código, cambiar estilos CSS y mucho más. Me gustó mucho este complemento como complemento a otras herramientas similares para trabajar con un blog y por eso quiero describir todo el período. instalaciones contra incendios en firefox.

Firebug: un complemento para Firefox que ayuda a codificar y trabajar con códigos

Esta extensión es para Firefox, tiene un nombre , lo que reduce significativamente el tiempo que lleva encontrar y corregir errores en el código HTML y CSS. Para un principiante al crear un sitio web, simplemente es necesario ayuda externa, que hoy en día es muy difícil de obtener de un webmaster conocedor de la materia, y algunas de las respuestas a las dudas que surgen se pueden obtener utilizando la extensión firebug.

Pero mucha gente se entera de estos “ayudantes” muy tarde, cuando se ha dedicado mucho tiempo a buscar errores y eliminarlos, y todo lo que tenían que hacer era descargarlos e instalarlos en el navegador. Como soy partidario del navegador Opera y no me gusta mucho Firefox, pero el complemento era para eso, lo pensé durante unos segundos, lo instalé y entré al mar. emociones positivas desde funciones y todo Firebug funciona. Por supuesto para navegador ópera Se han inventado muchas extensiones similares, pero me parecieron incompletas. Para compensar esto, tuve que instalar uno o dos complementos más, pero ¿por qué es necesario? Así que me decidí por uno que me conviene por completo. Y ahora queridos amigos Pasemos a la implementación real en el navegador Firefox.

Dónde descargar y cómo instalar Firebug en Firefox

Firebug es bastante fácil de instalar en Firefox y para hacerlo necesitas descargar el complemento Firebug haciendo clic en este botón grande en la esquina derecha, que ves a continuación.
Después de hacer clic, será transferido al sitio web oficial de Firefox para descargar más el complemento Firebug. Allí verás un gran botón en negrita” agregar a firefox» en el que se debe hacer clic.

Recuerda que si quieres modo automático instale la extensión en el navegador Firefox, debe hacer clic en el botón de descarga y si inicia sesión desde otro navegador y hace clic en el botón, se abrirá una descarga de archivo normal, que luego será modo manual debe agregarse al navegador Firefox.

Después de instalar Firebug, debe reiniciar su navegador para que las configuraciones agregadas surtan efecto. Cuando inicie sesión en Firefox, verá inmediatamente un "error" en el lado derecho esquina superior. esto es nuestro complemento instalado Encontrar y corregir errores de Firebug.

Si necesita ver el código de la página, puede usarlo o puede verificar el código. a mano presionando clic derecho Coloque el mouse en cualquier lugar de la página y seleccione Ver código fuente de la página. Por supuesto, el primer y segundo método son iguales y muestran el mismo código, pero su diferencia más importante es que Firebug coloca todo ordenadamente en estantes; cada comienzo de una etiqueta se indica por su final en forma de "estantes"; lo cual es mucho más claro. ¡Esto también tiene otra ventaja! ¿Necesita encontrar dónde se encuentra la etiqueta de cierre? Entonces cuando método manual Esto puede llevar una gran cantidad de tiempo, especialmente cuando la página tiene mucho contenido de script y estilo. y habiendo instalado complemento firebug te permitirá encontrar el final de cualquier estilo, código en 1 segundo, simplemente haz clic en el principio e inmediatamente mostrará el final.

Y ahora les mostraré estos gadgets usando un ejemplo.

Cómo utilizar Firebug cuando se trabaja con html y css

¿Quieres ver el código html de tu sitio web? Es bastante simple. Para hacer esto, haga clic en el "error" del complemento. Y se le mostrará el código completo de la página, así como el código CSS. Vea la captura de pantalla a continuación. Para cada div, su CSS se muestra a la derecha, que también puedes copiar, ver y cambiar según tus necesidades. Puede cambiarlo haciendo clic en el botón editar. Después de cambiar cualquier código, puede agregarlo al sitio; para ello, debe ir a FTP a través de cualquiera y realizar los nuevos ajustes creados. Asegúrese de revisarlo cada vez que cambie el código. Porque no necesitamos errores y, si los cometimos, los corregiremos oportunamente.

Firebug admite teclas de acceso rápido lanzamiento rápido, que puedes configurar tú mismo. Una de las teclas es F12, que le permite iniciarlo con un clic en cualquier página del navegador. Si quieres abrirlo en ventana separada, entonces debes presionar esta combinación CTRL+F12.
La parte principal del complemento se divide en dos mitades. A la izquierda esta editor html, a la derecha está editor css. Se parece a esto:

Puede desactivar las propiedades CSS que le interesen o agregar una nueva. Puedes desactivarlo haciendo clic en el círculo rojo tachado, y para agregar uno nuevo basta con hacer dos clics a la derecha de la propiedad. Se parece a esto:

Al editar el código a través de Firebug, el complemento muestra la ubicación de esta línea en su archivo style.css para su posterior edición. Ya ves lo conveniente que está todo diseñado y, lo más importante, ¡todo es sencillo! Ahora veamos qué configuraciones tiene Firebug.

No hay muchas configuraciones, por supuesto, puedes dejarlas en paz, pero te aconsejo que personalices las teclas de acceso rápido para trabajar más rápido y acceder al complemento a través de Firefox.

Medir la velocidad de carga del sitio a través de Firebug

La velocidad de carga del sitio web es un indicador muy importante a la hora de promocionar un sitio web en los motores de búsqueda. Cuanto mayor sea la velocidad de carga del sitio, más rápido llegarán los visitantes a su blog, lo que significa que algunos visitantes no abandonarán el sitio esperando a que se cargue. Recientemente, Google realizó cambios en sus algoritmos. Y ahora la velocidad de carga del sitio también afecta la posición del sitio. Hay una enorme cantidad de servicios en línea para comprobar la velocidad de carga del sitio, sobre lo que también escribiré en nuevos artículos. Pero ahora estamos hablando del complemento Firebug y lo usaremos para comprobar la velocidad de descarga. Para hacer esto, vaya al complemento Firebug, vaya a la pestaña "RED" y actualice la página de su sitio.

Según tengo entendido, la velocidad se verifica específicamente con el intercambio de paquetes entre su computadora y el sitio. A más precisamente el tiempo recibir datos del recurso. Si me equivoco en algo, corríjanme. El tiempo depende de la propia velocidad de Internet. Si no conoces tu velocidad, puedes hacerlo.

En esta lección veremos una magnífica adición. insecto de fuego para Firefox necesario para un webmaster. Le ayudará a encontrar y solucionar lugar correcto en el código HTML, así como 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 ID o clase CSS en contenedores. Un contenedor es lo que está encerrado en 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. Ud. diferentes desarrolladores Las plantillas tienen sus propias reglas de nomenclatura. clases CSS y DNI.

Usando Firebug para editar CSS

Como ya habrás notado, la ventana derecha del complemento describe los estilos CSS responsables de diseño html bloque 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 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. plantilla joomla 2.5 porque estoy seguro de que no todo lo que hay en esta plantilla te conviene.

Y así, elegimos valor deseado y visualmente todo nos conviene, pero dónde buscar ahora el archivo o archivos CSS que necesitamos.

Aquí todo es mucho más sencillo. El nombre está indicado aquí. archivo css y la línea donde se ubica 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 es muy factor 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 trabajar con un sitio tanto en hosting como ubicado en servidor local Denver (Denwer) .

Buena suerte para ti en tus esfuerzos.

¡Hola a todos!

Hoy les hablaré de uno muy extensión útil para navegadores Firebug! Complemento Firebug o traducido desde idioma en Inglés¡“Fire Beetle” es un verdadero avance evolutivo en el mundo de Internet y merece una atención especial!

Quizás para usuarios comunes World Wide Web el complemento no proporcionará ningún beneficio. Pero, si eres un web master y tienes tu propio recurso propio¡Te encantará Firebug! Y si también eres un maquetador principiante, te resultará fácil un asistente indispensable. Entonces, ¿qué tiene de bueno este insecto de fuego?

El complemento Firebug le permite buscar y editar fácilmente cualquier sección de código HTML o CSS, incluso si tiene dificultades para navegar en estos dos idiomas. Por ejemplo, necesita encontrar el código responsable de generar y mostrar la fecha y hora de sus publicaciones o mirar la sección de código que muestra el menú principal de su recurso.

O tal vez no estés satisfecho con la ubicación de los bloques en la barra lateral y quieras colocarlos de otra manera, cambiando su tamaño y color. Quizás en el futuro cambies combinación de colores diseño de su recurso y querrá cambiar el color de los enlaces para que coincida con él.

Y hay momentos aún más interesantes. En uno de los recursos de la red, te gustó uno de los elementos que el autor implementó en su sitio y tenías muchas ganas de hacer algo similar en tu blog. Pero, ¿cómo puedes ver qué código utiliza para implementar este elemento? La respuesta es simple: ¡el complemento Firebug te ayudará! Sí, sí, escuchaste bien, usando la extensión Firebug puedes ver los códigos HTML no solo de las páginas de tu recurso, sino también de cualquier otra.

El complemento Firebug te ayudará a lidiar con todo esto y más. Y he enumerado sólo los principales problemas laborales con los que suelen tener que lidiar los webmasters. De hecho, el complemento tiene muchas otras características, pero no hablaré de ellas en este artículo. Quizás algún tiempo después, pero no hoy.

Por supuesto, puedes hacer todo lo que he enumerado sin un complemento. Por ejemplo, si necesita encontrar una sección de código responsable de mostrar la hora y la fecha, puede hacer clic derecho en la página correspondiente del navegador y seleccionar "Código fuente de la página" en la lista desplegable o usar la tecla de acceso rápido Tecla Ctrl+U.

Pero en este caso, verá HTML: el código para todo el contenido de la página abierta, y solo necesitará la sección responsable de mostrar la hora y la fecha. Entonces, ¿qué deberías hacer entonces? Tendrás que revisar cuidadosamente todo el código para encontrar lo que necesitas. Y si no comprende nada de HTML, la búsqueda será inútil. ¿Qué nos ofrece el escarabajo de fuego en este caso?

Todo es muy simple, inmediatamente le dará una sección lista para usar del código que está buscando. Para hacer esto, simplemente coloque el mouse sobre el elemento que desee, haga clic derecho y seleccione "Inspeccionar elemento usando Firebug" de la misma lista desplegable (en diferentes navegadores el nombre es ligeramente diferente):

Firebug también mostrará la sección de código que le interesa, resaltándola en azul:

Pero eso no es todo. Puedes entrar inmediatamente cambios necesarios¡En el código sin miedo a equivocarte! El hecho es que el complemento te permite editar HTML y códigos CSS, observando en tiempo real todos los cambios que se producen. Y la mayor ventaja es que sólo tú los verás.

Y luego, si estás satisfecho cambios realizados, podrás hacerlos realidad, pero si no, después de actualizar la página, ¡todos los cambios desaparecerán instantáneamente! Así son las cosas muchachos. ahora estoy en ejemplo específico Te mostraré cómo sucede todo. Pero antes de comenzar, descarguemos e instalemos el complemento Firebug en su computadora. También debemos mencionar algunos puntos más relacionados con los diferentes navegadores.

Todo internauta prefiere uno de sus navegadores favoritos. El navegador es software para solicitar y ver páginas web. Hoy en día los más habituales son Mozilla Firefox y Google Chrome.

Personalmente, soy un fan desde hace mucho tiempo. Navegador Mozilla Firefox, aunque Google Chrome me parece bastante más rápido y funcional. Probablemente sea una cuestión de costumbre.

Entonces, inicialmente Extensión de Firebug fue desarrollado específicamente para el navegador Mozilla Firefox, pero el tiempo no se detiene y los desarrolladores han extendido el "error de incendio" a otros navegadores. Pero aun así, el original siguió siendo el original.

Y si en Mozilla Complemento de Firefox La instalación es muy sencilla, pero encontrar una página con la extensión de instalación para Google Chrome es un poco complicado. Por eso, decidí mostrar ambas opciones para instalar este maravilloso complemento. Entonces, transgredamos.

Para instalar FireBug directamente en su navegador, vaya aquí y haga clic en el botón "Descargar". FireBug se integra en Firefox y proporciona amplia elección Herramientas de desarrollo disponibles para usted al alcance de su mano. Puede editar, depurar y simplemente ver documentos CSS, HTML y JavaScript se encuentran en cualquier página. Puedes descargar y utilizar la extensión de forma totalmente gratuita.

Características y funciones clave

sólo de la manera que más te convenga... Puedes abrir FireBug en una ventana separada o como una barra en la parte inferior de tu navegador. FireBug proporciona control multifuncional "punto a punto" sobre el sitio;
estudiar y editar documentos HTML. FireBug hace que sea fácil de encontrar elementos HTML, ubicado en el medio documentos grandes. Una vez que hayas encontrado lo que buscas, FireBug te brinda información avanzada sobre el elemento y puedes editarlo en vivo;
puliendo CSS a la perfección. Las tablas CSS de FireBug te brindan toda la información sobre los estilos en tu página web, y si no estás satisfecho con algo, puedes cambiarlo y obtener una vista previa del efecto al instante;
visualización de dimensiones CSS. Si los bloques CSS no se representan correctamente, puede resultar difícil entender por qué sucede esto. Deje que FireBug sea sus ojos y medirá y mostrará todos los desplazamientos, rellenos, bordes, rellenos y todas las dimensiones;
Monitor de actividad de la red. Tus páginas tardan mucho en cargarse, pero ¿por qué? ¿Has escrito muchos guiones? ¿Olvidaste comprimir imágenes y pesan mucho? FireBug te ayudará a comprender y solucionar todos estos problemas;
Depuración de JavaScript. FireBug contiene un potente depurador de JavaScript que le permite detener la ejecución en cualquier momento, comprender y pulir el script. Si cree que su código es lento, utilice un generador de perfiles de JavaScript para medir el rendimiento y encontrar puntos débiles;
encontrar errores rápidamente. Cuando algo sale mal, FireBug lo informará inmediatamente y proporcionará la máxima información de error en código javascript, CSS y XML;
Investigación DOM. El modelo de objetos de documento es una gran jerarquía de objetos y funciones que están esperando ser utilizados. secuencias de comandos Java. FireBug te ayudará a encontrar rápidamente objetos necesarios DOM y luego editarlos sobre la marcha;
Ejecute JavaScript sobre la marcha. La línea de comandos es una de las herramientas más antiguas del paquete FireBug, pero tiene esta opción;
Registro de información de JavaScript. Tener un buen depurador de JavaScript es ciertamente bueno, pero a veces lo más manera rápida para buscar problemas: esto es volcar en la consola tanto como sea posible más información. FireBug le ofrece un conjunto de potentes funciones de registro que le ayudarán a encontrar soluciones a los problemas.

Yo mismo soy un fanático de Opera desde hace mucho tiempo, desde los días en que era de pago. En mi opinión, no puedes encontrar uno para navegar por la red.

Pero Opera es mucho menos adecuado para trabajar en un sitio web que todos los demás. navegador famoso Firefox. Opera, por supuesto, también se puede adaptar al diseño de un sitio web, pero, digan lo que se diga, no tiene algo como Firebug, y esto es muy importante para un diseñador de diseño novato. Aunque el tiempo vuela y desde que escribí este artículo, los desarrolladores de navegadores, aparentemente habiéndome escuchado, han agregado a todas sus creaciones capacidades básicas el héroe del artículo de hoy, pero el original sigue siendo lo mejor de lo mejor. .

Complementos del navegador para ayudar a los webmasters

Firebug era originalmente una extensión solo para y permitió reducir significativamente el tiempo necesario para encontrar y corregir el fragmento requerido en el código HTML, y si es un webmaster novato o la estructura de archivos del CMS (sistema de gestión de contenido) El motor no te resulta familiar, entonces no puedo imaginar cómo puedes arreglártelas sin él.

Sí, por supuesto, puedes abrir el código fuente. página deseada y buscar el lugar correcto, pero esto es tiempo y rutina, que nuestro héroe permite evitar fácil y naturalmente. Algo conveniente e insustituible, y antes no existía ningún análogo.

Entonces yo tenía que vivir en dos casas. En Opera navegué por Internet y en Firefox trabajé en mis proyectos, utilizando constantemente las capacidades de la extensión de la que hablaremos hoy.

Pero además de los complementos de diseño para navegadores, probablemente, cuando trabaje con sus proyectos, también necesite extensiones de SEO que le permitan rastrear rápidamente las relaciones públicas y las TIC de las páginas abiertas en el navegador, ver si están cerradas o no para indexación por motores de búsqueda enlaces externos en estas páginas (esto es especialmente interesante al comentar blogs y buscar los llamados blogs Dofollow) y mucho más (ver enlaces a ellos al principio del artículo).

Si hablamos de navegadores, me gustó mucho el nuevo: es rápido, incluso en comparación con Opera, es conveniente y hermoso, pero aún no he descubierto si hay algo para él, lo cual describiré a continuación.

Firebug no es sólo un complemento que agrega algunas funciones avanzadas a tu Firefox. Está escrito muy correctamente sobre esto en la página de desarrolladores: esta es la evolución del desarrollo web.

Sí, eso es exactamente. La evolución es cuando se pasa de un palo de excavación a una retroexcavadora. El efecto es sorprendente y lo sentirás inmediatamente cuando comiences a usar este complemento. Bueno, quizás ya sea suficiente con elogios, es hora de hablar de sus capacidades. Descargar Firebug Puedes hacerlo desde la página de complementos. En en este momento versión actual es 1.11.4.

Naturalmente, debes instalar esta extensión en Firefox, porque allí será mucho más fácil. Si hizo clic en el botón de descarga de esta extensión en cualquier otro navegador, se abrirá diálogo estándar descarga en la que guardarás esta distribución en tu disco duro.

Luego tendrás que ir a Mazila, desde menú superior seleccione "Archivo" - "Abrir archivo" y busque el archivo descargado en su disco duro. Como resultado, el proceso de instalación comenzará nuevamente.

Después de reiniciar el navegador, verá el icono de Firebug en forma de escarabajo en la esquina inferior derecha de la ventana; esto significa que este complemento se ha instalado correctamente y está esperando sus pedidos. Primero, analizaré las capacidades que yo mismo uso cuando trabajo con sitios web y luego hablaré brevemente sobre qué más se puede hacer con él en general.

Sucede que necesitas cambiar algo, terminarlo, arreglarlo, solo para ver cómo se implementa y funciona en tu propio recurso o en el de otra persona. Sí, sí, escuchaste bien, en el recurso de otra persona. Si te gustó esta o aquella solución para webmasters y quieres hacer lo mismo por ti mismo, Firebug te ayudará.

En principio, ya dije que puedes ver el código fuente de la página sin esta extensión (haz clic derecho en la página en cualquier navegador y selecciona entre menú contextual algo así como “Fuente de la página” o “Código fuente”), pero habrá mucho de este código y llevará tiempo encontrar el lugar correcto. ¿Qué nos ofrece el escarabajo de fuego en este caso?

Cómo utilizar Firebug al crear un sitio web

Y lo invita a hacer clic en el lugar de interés en la página web, nuevamente con el botón derecho y seleccionar en el menú contextual - "Analizar elemento" (en versión en inglés complemento será "Inspeccionar"). Y, he aquí, solo se abrirá en su ventana esa sección del código de la página que es responsable de la formación exactamente del elemento que le interesa. ¿Cómodo?

Indudablemente. Sólo por esto deberías amar este complemento. Pero él puede hacer mucho más. Verá el código del elemento que necesita en la ventana de este complemento que se abre en la parte inferior de la página, como se muestra en la figura anterior. La sección de código responsable del elemento de la página web que le interesa se resaltará en azul.

También preste atención a la línea que subrayé en la imagen con una línea roja, que comienza con la palabra "Editar" en la ventana de Firebug. Si hace clic en esta palabra, puede realizar cambios en la selección. código HTML, que aparecerá inmediatamente en la página.

Por ejemplo, cambie la URL de una imagen en la ventana del complemento a una deliberadamente inexistente y la imagen desaparecerá de la página web, devuelva todo y aparecerá la imagen. Pero tenga en cuenta que estos cambios no afectarán su recurso de ninguna manera. solo tu veras todos los cambios y sólo en esta página web, subordinada al todopoderoso bicho del fuego. Tan pronto como actualice la página, todos los cambios realizados por el complemento desaparecerán.

Con Firebug puedes simular lo que podría pasar cuando cambiando HTML o código CSS de una página web. De este modo, podrá, utilizando sus capacidades, buscar (sin perder tiempo buscando el archivo de su motor CMS responsable del resultado de esta sección) diferentes opciones y seleccione el que necesita, o rechace el cambio por completo si versión actual resulta que no es tan malo.

Pero si aún comprende que es necesario realizar cambios en el código HTML y que conducirán a una mejora en la apariencia de su página web, entonces llega ese momento difícil que, desafortunadamente, ni siquiera un escarabajo de fuego le ayudará a comprender. (Él, por desgracia, no es omnipotente).

El problema de encontrar el código correcto en los archivos del motor

Tendrás que buscar de forma independiente en el motor de tu sitio, foro o blog el archivo que genera esta sección de código HTML. Lo más probable es que este archivo tenga la extensión .php, es decir. escrito en lenguaje de servidor programación PHP y, en consecuencia, esta área puede verse completamente diferente de lo que ves en código fuente páginas web.

Ésta, en mi opinión, es la principal dificultad a la hora de editar la apariencia y el contenido de las páginas de un sitio web creadas en cualquier motor (CMS). Si es un webmaster novato o nunca se ha encontrado con un motor de este tipo, difícilmente podrá determinar de inmediato en qué archivo se forma el fragmento de la página web que le interesa.

Luego, con el tiempo, habiendo adquirido experiencia, esto no te resultará difícil, pero por ahora te sugiero que actúes de acuerdo con el siguiente esquema. Estoy hablando del tema, como les gusta decir: es una broma, por supuesto, no hay ningún secreto aquí.

Primero, necesitarás captar algo en el código que el tipo Firebug abrió para ti. Encuentre algo único o rara vez visto que probablemente se vería igual en archivo PHP tu motor.

Al buscar en el contenido de los archivos en Total Commander, puede surgir un problema con las palabras en ruso, o más bien con su codificación. Si Total Commander no encontró nada para su solicitud en ruso, marque la casilla junto a "UTF-8" en la ventana de búsqueda y se encontrará todo.

Características y principios del uso de Firebug.

Continuaremos la discusión sobre las capacidades de Firebug que comenzamos en este artículo. ya estamos en esquema general Se refirió a su trabajo, es decir, cómo se puede utilizar este complemento para determinar el fragmento de una página web responsable de un elemento de diseño en particular.

Además del método descrito anteriormente (haga clic derecho en la ubicación de interés en la página web y seleccione "Analizar elemento" en el menú contextual), esta extensión puede cobrar vida y con un simple clic en el icono de araña en la esquina inferior derecha de la ventana del navegador o usando la tecla F12. Al presionar esta tecla nuevamente se cerrará la ventana de Firebug.

Si desea que el complemento se abra en una ventana separada, haga clic en la araña mientras mantiene presionada la tecla Mayús en su teclado o use el método abreviado de teclado Ctrl+F12. Usted mismo elige la opción más conveniente para darle vida a esta obra maestra de la ingeniería. Su ventana se verá así:

Los botones del panel de control estarán ubicados en la parte superior y la parte principal de la ventana se dividirá en mitades izquierda y derecha. En la mitad izquierda se puede observar estructura HTML código de la página abierta en el navegador, y en la mitad derecha, estilos CSS que se utilizan para especificar uno u otro tipo de este documento web.

Cómo usar Firebug para aprender HTML

Firebug te permite implementar dos muy oportunidades interesantes, ayudando a comprender la estructura del código de la página abierta en el navegador. Puedes mover el ratón etiqueta HTML en la ventana de este complemento, y en la página web, se resaltarán aquellos elementos de cuya formación es responsable esta etiqueta (haga clic, por ejemplo, en Contenedores Div e inmediatamente verá el resaltado de este contenedor en la parte superior de la ventana diseño de páginas web).

O, por el contrario, puedes activar en esta extensión un modo tan complicado que moverás el ratón sobre la propia página web, y el código HTML correspondiente a las etiquetas (ubicadas debajo del cursor del ratón) se mostrará en tiempo real en la ventana de Firebug. Simplemente algo insustituible al estudiar la estructura de un recurso web en particular, especialmente para principiantes.

Para implementar todo lo que acabo de describir, necesitamos la información que se muestra en la mitad izquierda de la ventana del complemento, donde se muestran las etiquetas de una página web determinada abierta en el navegador. Allí se puede ver claramente el anidamiento de determinadas etiquetas, por ejemplo, contenedores DIV.

Para expandir el contenido de una etiqueta, puede hacer clic en el signo más al lado de ella. Al mover el mouse sobre un contenedor DIV particular en el lado izquierdo de la ventana de Firebug, puede ver qué elementos de la página web están incluidos en este contenedor DIV.

El complemento pintará el contenido del contenedor DIV con un patrón muaré azul en la página web, a través del cual podrá ver qué elementos de diseño se encuentran en este contenedor DIV. Es cierto que la página web que abre puede ser muy grande y luego tendrá que desplazarse para encontrar el fragmento de diseño resaltado en muaré azul.

Como puede ver en la captura de pantalla anterior, el contenedor

se encarga de mostrar un bloque con el título y descripción de mi blog de WordPress.

Pero puedes ir en sentido contrario para obtener información a través de Firebug sobre qué etiqueta es responsable de la salida de qué bloque en una página web determinada. En este caso, moveremos el mouse no a los bloques DIV con código, sino directamente a los elementos que nos interesan en la página web abierta en el navegador. En este caso, en la ventana del complemento, en el área de visualización del código HTML, se resaltarán en azul aquellas etiquetas (por ejemplo, contenedores DIV) que son responsables de la formación de este bloque.

Todo esto se mostrará dinámicamente en la ventana de esta extensión de acuerdo con el movimiento del mouse por la página web. muy visual y manera conveniente usando Firebug para estudiar las características de construir su propio proyecto web o el de otra persona.

Para implementar este método, solo necesitarás activar el modo correspondiente haciendo clic en el botón del panel que se muestra en la figura:

Una vez que haya hecho clic en este botón, mueva el mouse sobre las áreas correctas página web, y en el lado izquierdo de la ventana del complemento puede ver secciones del código HTML responsable de generar estos elementos de diseño (se resaltarán en azul). En este caso, el fragmento de la página sobre el que se encuentra el cursor del mouse estará encerrado en un marco azul:

Después de encontrar el fragmento deseado, puede hacer clic izquierdo sobre él e ir al campo izquierdo de la ventana de Firebug para trabajo adicional etiquetado con este elemento de diseño. Puede realizar cualquier manipulación con las etiquetas en la ventana del complemento y verá el resultado inmediatamente en la página abierta en el navegador.

En este caso, por supuesto, no se realizarán cambios en los archivos reales del motor del sitio. Pero por otro lado, puedes simular en tiempo real. varias opciones construcción de un diseño de página web. Si la nueva versión modelada con Firebug le conviene, tendrá que realizar cambios ya en archivos reales motor, que puede encontrar utilizando el método descrito anteriormente con la participación de Total Commander.

Cómo usar Firebug para trabajar con CSS

La ventana derecha de esta extensión muestra todas las propiedades CSS que son responsables del diseño del fragmento de código seleccionado en la ventana izquierda. Estas propiedades CSS definirán apariencia HTML dado bloquear. Esta podría ser su posición relativa a otros bloques en una página determinada, el tamaño, tipo y color de la fuente utilizada en un bloque determinado para mostrar el color o los enlaces, y mucho más.

Para demostración visual Capacidades CSS En el diseño de cualquier elemento de una página web, puede mover el cursor del mouse a cualquier regla de estilo que se muestra en el lado derecho de la ventana. Junto a esta regla aparecerá un círculo gris con una línea que lo atraviesa. Al hacer clic en él, lo desactivarás. propiedad CSS Aparecerá un círculo rojo en esta página web y al lado de ella.

Al mismo tiempo podrás observar abrir pagina sitio en tiempo real los cambios que se han producido. Eso. Firebug te ayuda a descubrir exactamente qué regla está en el archivo de tabla estilos en cascada de qué es responsable en el diseño de este elemento de diseño. Para volver a habilitar una propiedad CSS deshabilitada, deberá hacer clic nuevamente en el círculo rojo tachado al lado.

Las propiedades ubicadas en el lado derecho se pueden editar de la misma manera que editamos las etiquetas en el lado izquierdo de la ventana de esta extensión. Todos los cambios realizados en las propiedades desde el área derecha se mostrarán inmediatamente en la página web abierta en Mazil, pero no afectarán de ninguna manera las propiedades CSS reales escritas en el archivo de hoja de estilos en cascada, cuyo nombre puede ver arriba. bloquear:

La ventana de Firebug indicará la línea en el archivo de hoja de estilos en cascada en la que está escrita esta propiedad CSS. Por lo tanto, si le gustan los cambios simulados en el diseño del sitio web, para realizar los mismos cambios en las hojas de estilo de su sitio, sólo necesitará abrir el archivo deseado y buscar la línea sugerida en la ventana del complemento. Todo es mucho más sencillo que en el caso de realizar cambios en el código HTML de la página.

Cómo medir la velocidad de carga del sitio en Firebug

Y finalmente, me gustaría hablar sobre cómo medir la velocidad del sitio usando esta extensión (que no debe confundirse).

La velocidad a la que se carga su recurso es muy indicador importante, influyendo en el éxito y facilidad de su promoción en buscadores. Si la velocidad de carga de tu proyecto no es la adecuada, esto puede tener consecuencias bastante desagradables, tanto para los motores de búsqueda como para la fidelidad de tus visitantes.

Y lo más importante es que los visitantes pueden negarse a trabajar con su recurso, porque... Las páginas web tardan mucho en cargarse. Además de esto motores de búsqueda, V. Funciones de Google, tenga en cuenta la velocidad de descarga cuando evaluación general la utilidad de un recurso en particular, y también puede influir en la posición de su proyecto web en los resultados de búsqueda.

Para identificar y eliminar cuellos de botella en la velocidad de carga de elementos de su recurso, puede utilizar servicios especiales, permitiendo medir esta cuestión. Hablé de esto en el primer artículo sobre cómo determinar y aumentar la velocidad de carga del sitio (puedes leerlo).

Todo lo que tienes que hacer es ingresar la dirección de la página web deseada y después de un tiempo recibirás un desglose completo de qué elemento tarda y cuánto tiempo en cargarse. De esta manera es posible identificar claramente los elementos que ralentizan y tomar medidas para acelerar su carga.

Pero se puede hacer lo mismo sin recurrir a servicios de terceros. Nuestro complemento favorito, Firebug, tiene esta característica. Simplemente haga clic en el botón "Red" y actualice la página web abierta.

Como resultado, se le proporcionará información completa para cargar todos los elementos de una página web. Analizar y tomar medidas para acelerar la carga si es necesario. Probablemente eso sea todo por hoy. En el próximo artículo quiero continuar con el tema y también hablar sobre otro excelente complemento para Navegador Firefox, que nos ayudará a la hora de trabajar con el diseño de páginas del sitio web.

Este complemento se llama y tiene una gran cantidad de todo tipo de herramientas que le permiten simplificar el trabajo de diseño o ajustar la plantilla de su recurso web. Bueno, luego pasaremos a ver los complementos de SEO para FireFox y Opera.

También puedes ver un vídeo sobre el tema, que seguro no será superfluo:

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

");">