Cómo utilizar la herramienta “Inspeccionar elemento” de Firefox para examinar un sitio

Si alguna vez ha querido saber cómo están estructurados sus sitios web favoritos, los servicios de “Inspección” de un navegador pueden ser una bendición oculta. Hemos cubierto la herramienta “Inspeccionar” de Chrome , y Firefox también viene con una oferta similar.

La herramienta “Inspeccionar elemento” de Firefox puede ayudarlo a investigar los fundamentos del funcionamiento de un sitio web, incluidos los elementos HTML y CSS que utiliza, su carga en la red, la latencia de sus elementos de carga y los archivos que almacena, como galletas.

Es posible que los desarrolladores experimentados no encuentren muchas novedades en este manual. Sin embargo, los principiantes y los usuarios habituales de la web deberían encontrar un lado nuevo y poderoso de las capacidades de Firefox y una gran cantidad de archivos y operaciones que se encuentran debajo de todos los sitios de Internet.

Instalación

Si usa Firefox, no necesita hacer nada más. Si desea comenzar a usar Firefox y está en Windows, Linux, Mac, iOS o Android, siga este enlace  para encontrar la última versión del navegador. Instale los archivos de instalación descargados como lo haría normalmente haciendo doble clic en ellos o tocando si está en un teléfono inteligente.

Las principales distribuciones de Linux probablemente vienen con Firefox preinstalado o tienen copias de Firefox en su centro de software / repositorios de paquetes que el usuario puede instalar fácilmente.

Abrir “Inspeccionar elemento”

Después de la instalación de Firefox, puede encontrar su inspector haciendo clic con el botón derecho en cualquier elemento de una página web. Eso le mostrará un menú desplegable como el que se muestra a continuación, donde “Inspeccionar elemento” se encuentra cerca de la parte inferior de la lista.

Inspector

Al hacer clic en “Inspeccionar elemento”, se abrirá inmediatamente el inspector en la parte inferior de la pantalla. En este punto, los títulos se vuelven un poco confusos ya que el inspector técnicamente habrá abierto la parte “Inspector” de sus servicios.

En cualquier caso, el elemento en el que hizo clic se mostrará en el medio de la herramienta, y cuando pase el mouse sobre ese elemento, como la <div>etiqueta sobre la que coloco el cursor en la captura de pantalla siguiente, el “Inspector” resaltará ese elemento visual en su pantalla en la propia página web.

Esto facilita saber qué elementos está viendo. También facilita la búsqueda de las diversas propiedades de esos elementos. Si mira hacia el lado derecho del “Inspector”, verá las propiedades de esa <div>etiqueta específica , incluida su configuración de margen, relleno, borde, tamaño de fuente y alineación vertical.

Si se desplaza por ese panel del lado derecho, puede ver las propiedades que heredó de otros elementos. Incluso puede cambiar las propiedades en esa ventana y verlas aparecer en la página web en tiempo real.

Editor de estilo

Puede continuar su viaje al ámbito de las hojas de estilo en cascada (CSS) siguiendo la barra de herramientas en la parte superior del inspector. Haga clic en donde dice “Editor de estilo” para abrir un nuevo diálogo que muestra tres nuevos paneles en la parte inferior de su pantalla.

Aquí puede ver los dos archivos de hoja de estilo que usa DuckDuckGo, los elementos de la primera hoja de estilo seleccionada y las diversas reglas “@media” de esa hoja, que gobiernan el diseño receptivo para pantallas más pequeñas y más grandes.

Puede editar estas hojas de estilo como puede hacerlo en la sección “Inspector”. En este caso, hay muchas reglas para elegir: 1262 reglas solo en la primera hoja de estilo.

Si navega aún más en la barra de herramientas hasta el “Monitor de red”, encontrará las solicitudes del sitio web para esos archivos y sus estados. Otros elementos como imágenes y fuentes también pueden estar presentes en esa pestaña, y puede ver todas esas solicitudes y el tamaño de cada archivo después de que se haya procesado la solicitud.

Actuación

Cuando abra la pestaña “Rendimiento”, deberá hacer clic en el botón “Iniciar grabación de rendimiento” para que el inspector recopile información. En unos segundos, descubrirá los fotogramas por segundo (FPS) en los que se ejecuta su página, los eventos del modelo de objetos de documento (DOM) que tuvieron lugar y los nuevos cálculos de estilo, junto con el tiempo (generalmente en milisegundos) que tomaron esos elementos para carga.

Para este sitio, puede ver el evento DOM resaltado, un mouseover, tardó 6.03 milisegundos en cargar. El FPS promedio para esta página fue de aproximadamente 39. Y el gráfico que muestra mi rango de tiempos de respuesta alcanzó los 9000 milisegundos para algunos eventos.

Memoria

En la pestaña “Memoria”, también deberá hacer clic en un botón, “Tomar instantánea”, para recopilar información. Para mí, generó un mapa de eventos que muestra aproximadamente 600 Kb de cadenas, 1 Mb de objetos y 1 Mb de scripts que encuentran su camino hacia la memoria. Puede ver esos mismos elementos en un par de formas diferentes haciendo clic en el menú desplegable donde dice “Mapa de árbol”, como puede ver en esta captura de pantalla.

Almacenamiento

Finalmente, si hace clic en la pestaña “Almacenamiento”, puede ver los archivos permanentes que un sitio web puede haber colocado en su computadora. Relevante para la mayoría de los usuarios, esto incluye cookies. Puedes ver uno cargado en la imagen de abajo.

Puede ver en el panel del lado derecho que esta cookie en particular caduca a mediados de la próxima década y que accedí a ella durante la sesión de redacción de este artículo.

Conclusión

Hay mucho por recorrer cuando se usa el inspector de Firefox. Esta introducción a sus múltiples partes debería mantenerlo ocupado por un tiempo.

Tómese su tiempo para cambiar los elementos HTML de un sitio. Visite algunos sitios web diferentes para ver sus tiempos de carga. Descubra cuántas cookies intenta almacenar una página en particular en su máquina. A veces, esa información puede hacer que te detengas.

Con suerte, este viaje de descubrimiento le dará una mayor comprensión de lo que hacen los sitios web para que puedan funcionar como espera. Puede que sea mucho más de lo que pensaba anteriormente.

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario