Firefox Inspect Element Featured

Cómo usar 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 las bases 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 novatos y los usuarios habituales de Internet deberían encontrar un lado nuevo y poderoso de las capacidades de Firefox y un pozo profundo de archivos y operaciones que se encuentran debajo de cada sitio en Internet.

Instalación

Si usas Firefox, no necesitas hacer nada más. Si quieres comenzar a usar Firefox y estás 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.

Es probable que las principales distribuciones de Linux vengan con Firefox preinstalado o tengan copias de Firefox en su centro de software/repositorios de paquetes que el usuario puede instalar fácilmente.

Apertura de «Inspeccionar elemento»

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

Menú desplegable de Firefox

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 habrá abierto técnicamente 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 el <div> etiqueta sobre la que paso el mouse en la captura de pantalla a continuación: el «Inspector» resaltará ese elemento visual en su pantalla en la página web misma.

Pestaña de inspección del inspector de Firefox

Esto hace que sea fácil saber qué elementos estás viendo. También facilita encontrar las diversas propiedades de esos elementos. Si observa el lado derecho del «Inspector», verá las propiedades de ese <div> etiqueta, 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 reino de las hojas de estilo en cascada (CSS) siguiendo la barra de herramientas en la parte superior del inspector. Haga clic donde dice «Editor de estilo» para abrir un nuevo diálogo que muestra tres nuevos paneles en la parte inferior de su pantalla.

Pestaña de estilo del inspector de Firefox

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

Puede editar estas hojas de estilo tal como lo hace 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.

Pestaña de red del inspector de Firefox

Actuación

Cuando abra la pestaña «Rendimiento», deberá hacer clic en el botón «Comenzar a grabar el 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 objeto de documento (DOM) que tuvieron lugar y los recálculos de estilo, junto con el tiempo (generalmente en milisegundos) que tomó esos elementos para carga.

Pestaña de rendimiento del inspector de Firefox

Para este sitio, puede ver el evento DOM resaltado, un mouseover, tardó 6,03 milisegundos en cargarse. El promedio de FPS 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 de un par de maneras diferentes haciendo clic en el menú desplegable donde dice «Mapa de árbol», como puede ver en esta captura de pantalla.

Pestaña de memoria del inspector de Firefox

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.

Pestaña de almacenamiento del inspector de Firefox

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. Averigüe cuántas cookies intenta almacenar una página en particular en su máquina. A veces, esa información puede darle una pausa.

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Experto Geek - Tu Guía en Tendencias Tecnológicas