Una mirada a las herramientas esenciales de Firefox para desarrolladores web
Firefox ha sido durante mucho tiempo el navegador preferido para el desarrollo web. Hay una serie de complementos útiles para hacer el trabajo. En esta publicación, vamos a ver algunos complementos que creo que es esencial que se instalen si va a realizar un desarrollo web. También vamos a descubrir algunas de las características de estos complementos que pueden ayudar.
En primer lugar, necesitamos instalar el Firebug..
Firebug
Firebug es un complemento que debe instalarse para el desarrollo web. Suponiendo que no sepa dónde obtener Firebug, puede instalarlo aquí. Probablemente, debes reiniciar tu Firefox antes de que se active.
Después de eso, puede ver el Firebug a través de una de las siguientes formas: siga este menú Herramientas> Desarrolladores Web> Firebug, Haga clic derecho en la página web y elija “Inspeccionar elemento con Firebug”.
Alternativamente, puedes encontrar un ícono de Firebug en Firefox y hacer clic en él, esto mostrará la ventana de Firebug;
Firebug es bastante idéntico a Herramientas para desarrolladores de Chrome. tiene un panel para ver la estructura HTML y los estilos, y también un panel de consola para ver los errores, advertencias y registros. Pero, tengo algunos consejos más que espero que puedan ser útiles..
Ajuste del tamaño de la caja
El elemento HTML está compuesto por un modelo de caja CSS que consta de margen, relleno y dimensión del objeto (ancho / alto). Hay ocasiones en que es posible que tengamos que modificar estas propiedades. En ese caso, puede seleccionar uno de los elementos que desea que cambie, y luego ir a Diseño panel.
En este panel, encontrará una ilustración de un modelo de caja CSS junto con su información, que incluye la anchura y altura. Aunque estas dos propiedades no están especificadas en CSS, esta herramienta es lo suficientemente inteligente como para determinar el valor. Si necesita modificarlos, simplemente haga clic en el valor y use la tecla de flecha hacia arriba o hacia abajo para aumentar o disminuir el valor.
Estilos computados
En muchas situaciones, probablemente se esté preguntando por qué ciertos estilos no se aplican. Una de las formas más fáciles y rápidas, especialmente cuando tiene miles de líneas de estilos, es inspeccionarla desde el Estilo computado panel. Este ejemplo muestra que el color del texto de la etiqueta de anclaje se sobrescribe con .botón clase, mientras que el fondo de la .botón la clase es sobrescrita por .button.add.
Inspeccionar la familia de fuentes (la manera fácil)
Probablemente encuentres algo como esto en Familia tipográfica Propiedad en CSS con varias familias de fuentes. Desafortunadamente, esto no nos dirá específicamente qué fuente toma el navegador. Para facilitar la identificación podemos instalar esta extensión de Firebug a saber: FireFontFamily.
Una vez finalizada la instalación, cargue su página web y ahora podemos ver claramente qué familia de fuentes se aplica. En nuestro caso es de hecho. Helvetica Neue (ver foto).
Analizando el rendimiento
Esto podría ser una cuestión de tipo, pero Site Speed ahora es uno de los parámetros de Google (algoritmo) para decidir la calidad del sitio web; el sitio web que se carga más rápido se considera que está bien desarrollado y tiene una clasificación más alta en términos de contenido. Así que la velocidad no es algo que deba pasarse por alto..
Panel de red
El primer lugar que deba visitar para inspeccionar el rendimiento de su sitio web es el Red panel. Este panel registrará la solicitud HTTP de su sitio web cuando se cargue. Esta captura de pantalla a continuación muestra una página web que carga 42 solicitud y toma alrededor 4.36 segundos cargar.
Luego puede ordenar la solicitud HTTP según su tipo, como HTML, CSS e imágenes..
Yslow!
Además, también puede instalar YSlow, una extensión para Firebug de Yahoo !. Después de que se active, encontrará un panel adicional expresivamente llamado Yslow!.
Similar a Red panel, Yslow! grabará el rendimiento de la página web cuando se está cargando, pero también le dirá por qué la página web es lenta y qué podemos hacer para resolverla. En este ejemplo, realizamos una prueba a una página web y se califica 86 para el rendimiento general, que se considera OK.
Velocidad de la página
Alternativamente, también puedes instalar Page Speed desde Google. Similar a Yslow!, prueba el rendimiento de la velocidad del sitio web, aunque el resultado de la prueba puede ser ligeramente diferente. Este ejemplo muestra que la misma página web anotó 82 según la velocidad de la página.
Herramientas para desarrolladores web
Las herramientas para desarrolladores web son, obviamente, para desarrolladores web y tiene un montón de características incluidas en esta barra de herramientas. Pero este de abajo es uno de mis favoritos..
Inspección de imagen
En ocasiones es posible que debamos obtener información de la imagen de la página web. Por lo general, veo que la gente hace esto tropezando en el navegador o haciendo clic con el botón derecho en la imagen y seleccionando Ver información de la imagen, al igual que:
Pero de esta manera no es muy eficiente cuando necesitamos obtener la información de muchas imágenes. En ese caso, podemos utilizar el Imágenes característica del complemento. Esta función es fácilmente accesible desde el menú Imagen de la barra de herramientas.
Y, este ejemplo muestra cómo mostramos la dimensión de la imagen y el tamaño del archivo de imagen simultáneamente:
Herramientas incorporadas de Firefox
En versiones recientes, Firefox ha mejorado enormemente sus funciones integradas para desarrolladores web, algunas de ellas son:
Elemento de inspección nativa
Este nativo Inspeccionar elemento de Firefox puede parecer similar a “Inspeccionar elemento en Firebug”, Pero en realidad actúa de diferentes maneras..
Esta vez, no iré más allá de esta función, ya que es esencialmente idéntica a la de los paneles HTML y CSS de Firebug, aunque con una diferencia en el diseño y la distribución. Pero, hay una característica distintiva que vale la pena probar, el Vista 3D.
Utilizando Vista 3D Puede ver la estructura de la página web en profundidad. Para activar esta vista, puede encontrar el botón en la parte inferior derecha de la “Elemento de inspección nativo de Firefox”. Así es como el Vista 3D parece.
Sin embargo, no lo uso tan a menudo como otras características, pero es una característica bastante innovadora de Mozilla, lo admito, y ciertamente muy útil en ciertas situaciones..
Vista de diseño web
Desde la creciente popularidad en el diseño web responsivo, Firefox ha iniciado un Bookmarklet sensible al navegador. Esta herramienta nos permitirá probar nuestro sitio web sensible en diferentes vistas sin cambiar el tamaño de la ventana del navegador.
Esta vista está disponible desde este menú: Herramientas> Desarrollador web> Vista de diseño web. Y, así se ve la vista..
Editor de estilo
Por último, si trabaja con CSS con frecuencia, es probable que se enamore de esta función. Desde la versión de 11, Firefox había agregado Editor de estilo en sus herramientas de desarrollo nativas.
Esta característica es tan genial como la Vista de diseño web, le permite editar el CSS, ver el impacto al instante en el navegador y guardar los cambios que afectan directamente el archivo fuente CSS.
El editor de estilos está disponible en el siguiente menú: Herramientas> Desarrollador Web> Editor de estilo.
Pensamiento final
Hay un montón de funciones incluidas en estos complementos de Firefox y las que se analizan aquí son solo algunas de las funciones que utilizo con bastante frecuencia durante el desarrollo web. No obstante, es posible que tenga otros consejos que podrían ser útiles para aumentar la productividad del desarrollo web en Firefox.
¿Qué características utilizas con frecuencia? Puede compartir sus pensamientos en el cuadro de comentarios a continuación.
