Hogar › Tarifas › ¡Firebug para Firefox! ¿Cómo utilizar la extensión Firebug? ¿Cómo utilizar la extensión FireBug en Chrome? Instalación de Firebug Chrome

¡Firebug para Firefox! ¿Cómo utilizar la extensión Firebug? ¿Cómo utilizar la extensión FireBug en Chrome? Instalación de Firebug Chrome

¡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 con el botón derecho en la página correspondiente del navegador y seleccionar "Código fuente de la página" en la lista desplegable o usar tecla de acceso rápido 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 comunes son 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.

Así, inicialmente la extensión Firebug fue desarrollada específicamente para el navegador Mozilla Firefox, pero el tiempo no se detiene y los desarrolladores han extendido "firebug" 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.

Lo tuve instalado durante bastante tiempo; no tenía el menor deseo de profundizar en los detalles de las versiones de desarrollo, ocuparme de su instalación/prueba y recopilar todos los errores que abundaban en ellas.

Por este motivo, hasta el lanzamiento de la versión con apoyo total extensiones que usé Google Chrome sólo como una alternativa más rápida a Mozilla Firefox: si necesitaba ir rápidamente a un sitio, en lugar del pesado Firefox, abría cromo rápido, observó información necesaria y lo cerré. Barato y alegre, pero las cosas no fueron más allá.

Sin embargo, con la liberación nueva versión, Decidí echar un vistazo más de cerca a la funcionalidad de los complementos. Inicialmente, llegué al directorio de extensiones de Google Chrome únicamente por los complementos a los que estaba acostumbrado en Firefox: administración de pestañas, bloqueador de anuncios y flash, organización de marcadores, etc. Teniendo en cuenta el proceso bastante lento de desarrollo de complementos para Mozilla Firefox, no esperaba ver más que versiones alfa de los complementos, pero me sorprendió gratamente: casi toda la lista de extensiones que usé en Mozilla Firefox también se presentó para Chrome. Además, lo que más me sorprendió fue que algunos complementos para Chrome tenían una funcionalidad superior a sus homólogos de Firefox.

Por ejemplo, el cliente de Twitter Cromed Bird ya puede trabajar con hojas, a diferencia de su homólogo Echofon, y ya incluye soporte para identificar enlaces (no existe una función similar en SeoQuake para Firefox).

Inspirado por un arsenal de complementos verdaderamente rico, tuve la idea sediciosa de trasladar Google Chrome de la categoría de programas "alguna vez" a la categoría de "usado constantemente". En base a esto, volví a recurrir al repositorio de complementos para encontrar aquellos que estoy acostumbrado a usar en el proceso de trabajo.

Entonces, aquí está la lista de complementos que se encontraron y utilizaron.

Frebug Lite

Firebug Lite: creo que este complemento es conocido por todos los desarrolladores y es uno de los primeros en su arsenal. Firebug para Google Chrome te permite ver y editar HTML, CSS y JavaScript de cualquier página sobre la marcha sin salir de tu navegador.

Simplemente abra el panel de Firebug, haga clic en "Inspeccionar" y mueva el cursor a el elemento requerido- Tanto el código HTML como CSS de este elemento se mostrarán en Firebug. Además, una "elegancia" especial es el hecho de que el código se puede editar directamente en Firebug, sin realizar cambios en los archivos fuente.

Cabe señalar que su funcionalidad aún es algo más limitada en comparación con la versión del mismo complemento para Mozilla Firefox, pero por un lado, esta es todavía solo una versión beta, y por otro, la funcionalidad principal ya está presente y Funciona sin errores.

Pestaña IE

Pestaña IE - Explorador de Internet absolutamente impopular entre los desarrolladores, ya que suele ser la fuente problemas sin fin. Sin embargo punto dado La vista no es compartida por los usuarios e incluso hoy en día, con toda la variedad de navegadores, IE ocupa una posición de liderazgo, lo que obliga a los desarrolladores a obligatorio Ten en cuenta todos sus “encantos”.

IE Tab ejecuta el motor de Internet Explorer directamente en interfaz de google Chrome, que permite al desarrollador ver y encontrar rápidamente áreas problemáticas en el diseño del sitio.

Además, a veces ocurre la situación contraria, en la que el sitio se muestra correctamente en Internet Explorer, pero es problemático en Mozilla Firefox o Google Chrome. (esto se aplica principalmente a sitios antiguos). Para dichos sitios, IE Tab proporciona un modo descarga automática un sitio específico inmediatamente en Internet Explorer, evitando su carga en Google Chrome.

Gotero para ojos

Eye Dropper es una extensión que te permite conocer el color de cualquier elemento de la página. Al hacer clic en un elemento con el cuentagotas, recibirás información sobre este color en código RGB y HTML.

En esencia, este complemento es un análogo. herramienta cuentagotas Herramienta en Adobe Photoshop. Para mí, el complemento es útil en el desarrollo porque me permite evitar tener que buscar en el archivo CSS el color de cualquier elemento, así como la posibilidad de abrir en la siguiente pestaña. diseño gráfico sitio y usar Eye Dropper para crear CSS rápidamente sin tener que recurrir a Adobe Photoshop cada vez.

Prueba de resolución

Prueba de resolución: la funcionalidad principal del complemento ya está indicada en su mismo nombre. La prueba de resolución para Google Chrome le permite emular un cambio en la resolución del monitor cambiando el tamaño de la ventana del navegador.

Esto significa que sin cambiar la resolución real de su monitor, puede ver cómo se mostrará el sitio con una resolución diferente.

La lista de disponibles contiene casi todas las resoluciones potencialmente posibles y, si se requiere alguna que no sea estándar, se puede ingresar en el campo "Personalizado".

También puedes marcar todas las resoluciones requeridas y las emulaciones se abrirán en nuevas ventanas.

¡Mídelo!

¡Mídelo! — desde un punto de vista funcional, este complemento es muy simple y ni siquiera tiene configuraciones. Agrega una regla a Google Chrome que permite medir en píxeles cualquier elemento o bloque del sitio.

También uso el mismo complemento para Mozilla Firefox y recuerdo lo feliz que me sentí cuando lo encontré. Muy a menudo surgen situaciones en las que es necesario medir el tamaño de un bloque que consta de varios elementos, pero hacerlo sin una "regla" de este tipo es casi imposible.

péndulo

Pendule: este complemento recuerda al Web Developer para Mozilla Firefox, pero con mucha menos funcionalidad por ahora. EN en este momento El complemento puede funcionar con CSS, formularios, imágenes y validadores. Además, tiene la funcionalidad integrada MeasureIt y Eye Dropper.

Trazador de velocidad

Speed Tracer: este complemento le permitirá analizar, detectar y solucionar problemas de rendimiento en su sitio web. La extensión se muestra en en forma visual— en qué y cuánto tiempo se dedica el navegador, en particular: analizar y ejecutar Javascript, ejecutar CSS, cargar recursos de red, trabajar con elementos DOM, renderizar el diseño del sitio web, etc.

Captura de pantalla del aviario

Aviary Screen Capture: le brinda la oportunidad, utilizando las herramientas del sitio Aviary.com, de crear capturas de pantalla de cualquier página. Además, la extensión te permite:

guarde la captura de pantalla recibida en su computadora o en el sitio web Aviary.com;
usar funciones simples edición de imágenes.
seleccionar áreas, rotar y recortar la imagen;
Inicio rápido de 6 herramientas adicionales del paquete Aviary: editor de imágenes, editor de marcas, editor de vectores, editor de paleta de colores, editor de efectos y editor de audio.

Rastreador de cromo

Chrome Sniffer: le permite saber qué frameworks, CMS y bibliotecas de JavaScript se utilizan en el sitio. Es muy sencillo de utilizar: al cargar el sitio, en barra de direcciones Aparece el icono de una u otra aplicación.

Actualmente, la extensión puede detectar hasta 50 CMS populares y Bibliotecas de JavaScript, y en futuras actualizaciones los desarrolladores prometen ampliar esta lista.

Generador Lorem Ipsum

Lorem Ipsum Generator: la extensión está diseñada para generar textos aleatorios basados en Lorem Ipsum con un solo clic. De las configuraciones, solo hay 2 opciones: "palabras por línea" y "número de líneas". Pero, como dice el propio desarrollador: “No necesitas una bazuca para matar una rata, ¿verdad?”

SeoQuake

SeoQuake - muy complemento conveniente, demostrando los indicadores SEO del sitio:

Ranking de página de Google
Índice de Google
enlaces de yahoo
dominio de enlace de yahoo
índice de bing
Rango de Alexa
Edad del archivo web
Índice delicioso
enlace whois
código fuente de la página
Rango SEMRush
resaltado de enlaces Nofollow.

En comparación con la versión para Mozilla Firefox, la versión de SeoQuake para Google Chrome tiene actualmente una funcionalidad peor, pero los autores piden que se tenga en cuenta que todavía es sólo una versión beta.

SEO en Chrome

Chrome SEO es una extensión con una funcionalidad más seria que la anterior. Si SeoQuake puede considerarse un complemento de SEO, entonces Chrome SEO es una designación más apropiada SEO/SMO. Permite:

Herramienta de investigación de palabras clave (versión alfa);
Destacar enlaces NoFollow;
Número de páginas indexadas;
Tráfico actual y ranking;
Demostración de gráficos;
Definición de Robots.txt y Sitemap.xml;
Indicadores de marcadores sociales;
Versión en caché de la página;
Información del dominio: DNS, IP, Whois, ubicación del servidor

Visor de TIC y relaciones públicas de Yandex

Yandex TIC & PR Viewer: muestra las relaciones públicas y las TIC del sitio, así como el número de páginas indexadas por Google, Yandex y Alexa Rank.

Clasificación de iPage

iPage Rank: según el desarrollador, a diferencia de todos los demás complementos para comprobaciones simples de relaciones públicas y TIC, iPage Rank le informará: ¿Cuántas relaciones públicas y TIC se transferirán a su sitio web? usando Enlaces dofollow en la página. Este enfoque es lo suficientemente conveniente como para determinar si tiene sentido recibir vínculo de retroceso de este sitio.

Además, muestra cuántos enlaces, enlaces de seguimiento, enlaces de seguimiento externos y enlaces de seguimiento internos hay en la página. Además, el complemento utiliza un servidor aleatorio de Google para obtener valores de relaciones públicas para evitar el bloqueo por parte de Google.

Pasterbin

Pasterbin: el complemento le permite pegar y resaltar código (C, Python, Ruby, HTML, CSS
...) en servicios de Pastebin. Muy conveniente para publicar código en foros, IRC o redes sociales(por ejemplo, Twitter). Desarrollado por pasta.pocoo.org.

— un recolector de complementos que le permite recibir información diversa sobre su sitio:

¿Qué extensiones interesantes para Google Chrome utilizas?

El navegador Chrome le permite utilizar varias extensiones, que aumentan sus capacidades. Una de esas extensiones es Firebug. para google Cromo. ¿Por qué es necesario? Este complemento hace que sea fácil y sencillo buscar y editar código requerido su sitio web. Aquellos. Después de iniciar esta aplicación, puede usar tranquilamente el mouse, señalar cualquier elemento del sitio (enlace, texto, imagen, cualquier cosa) e inmediatamente ver el fragmento de código del programa al que señaló con el mouse.

Aquellos. esta extensión te permite ver cómo se verá apariencia tu blog al entrar varios cambios V código de programa páginas web.

Al mismo tiempo, no hay ningún cambio de código real: todo se hace en una ventana abierta del navegador.

En la imagen el ratón apunta a la fecha 02/11/2011. Este complemento resaltó este lugar con un cuadrado azul, y en su ventana señaló (resaltado y resaltado en azul) el código del programa que creó el elemento en cuestión (en en este caso- fecha).

Instalación de Firebug Chrome

Apertura Navegador Chrome y en la derecha esquina superior Haga clic en el icono de configuración del navegador.

A continuación, seleccione " Herramientas adicionales" y luego "Extensiones". Vaya al final de la página y haga clic en el enlace "Más extensiones". En la ventana que se abre, busque "Firebug Lite para Goole Chrome" y haga clic en el botón "Instalar".

Si de repente no lo ha encontrado, simplemente avance y presione el botón verde.

Aparecerá una imagen con la pregunta: ¿Debo instalar Lite para Goole Chrome? Haga clic en el botón "Instalar". Aparecerá una imagen de un escarabajo en la esquina superior derecha del navegador.

Es blanco y negro y aún no está activado. En cuanto lo activemos se pondrá de color.

Todo. Nuestro pequeño programa está instalado y listo para funcionar. Tenga en cuenta que el "error" es gris (inactivo). Para trabajar con esta extensión, simplemente haga clic en ella, el "error" se coloreará color brillante¡Y el “bicho” está listo para funcionar!

O llámalo presionando F12.

Por cierto, también existe Firebug para Firefox (cómo instalarlo y usarlo se describe en el artículo).

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 hay forma de 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 busca así 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. Por ahora 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 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, simplemente 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 he dicho que puedes ver el código fuente de la página sin esta extensión (haz clic en clic derecho Pase el mouse sobre la página en cualquier navegador y seleccione 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 hay que 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 ventana separada, luego haga clic en la araña mientras mantiene presionada la tecla Mayús en el 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 determinarán la apariencia de este Bloquear HTML. 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 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, especialmente Google, tienen en cuenta la velocidad de carga al 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. en nuestro amado Complemento Firebug existe tal posibilidad. 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

");">