Si desea saber cómo están organizados sus sitios web favoritos, los servicios de "escaneo" del navegador pueden ser una bendición oculta. Tenemos cubierta 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, cuánto tiempo se carga y los archivos que almacena, como las cookies.
Es posible que los desarrolladores experimentados no encuentren mucho en este arranque. 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 la gran profundidad de los archivos y procesos que se encuentran debajo de cada sitio web en Internet.
Instalación
Si está utilizando Firefox, no hay necesidad de hacer nada más. Si quieres empezar a usar Firefox y estás usando 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 haciendo clic si está utilizando 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.
Abra "Inspeccionar elemento"
Después de instalar Firefox, puede encontrar Inspeccionar haciendo clic con el botón derecho en cualquier elemento de una página web. Esto le mostrará un menú desplegable como este que se muestra a continuación, donde "Inspeccionar elemento" se encuentra cerca del final de la lista.
Inspeccionar
Al hacer clic en "Inspeccionar elemento" se abre inmediatamente Inspeccionar en la parte inferior de la pantalla. En este punto, las direcciones se vuelven un poco borrosas ya que el inspector técnicamente abrirá la parte "Inspeccionar" de sus servicios.
En cualquier caso, el elemento en el que hizo clic se mostrará en el medio del widget, y cuando coloque el mouse sobre este elemento, como una etiqueta <div></div> Sobre el cual pasa el mouse en la captura de pantalla a continuación: "Inspeccionar" resaltará este elemento visible en su pantalla en la página web.
Esto hace que sea más fácil para usted saber qué artículos está mirando. También facilita encontrar diferentes propiedades de esos elementos. Si miras hacia el lado derecho deInspeccionar', verás las características de esa marca especificado, incluida su configuración de margen, relleno, borde, tamaño de fuente y alineación vertical.
Si se desplaza por el panel lateral derecho, puede ver las propiedades que ha heredado de otros elementos. Incluso puede cambiar las propiedades en esa ventana y ver cómo aparece en la página web en tiempo real.
Editor de estilo
Puede continuar su viaje al mundo de las hojas de estilo en cascada (CSS) siguiendo la barra de herramientas en la parte superior de Inspeccionar. Haga clic donde dice "Editor de estilo" para abrir un nuevo cuadro de diálogo que muestra tres nuevos paneles en la parte inferior de la pantalla.
Aquí puede ver los dos archivos de hoja de estilo DuckDuckGo, los elementos de enlace de hoja de estilo específicos y las diferentes reglas de "medios" para esa hoja, que rigen el diseño receptivo para pantallas pequeñas y grandes.
Puede editar estas hojas de estilo tal como puede hacerlo en la sección "Inspeccionar". En este caso, hay muchas reglas para elegir: 1262 reglas solo en la primera hoja de estilo.
Si va más allá en la barra de herramientas a Network Monitor, encontrará solicitudes de sitios web para estos archivos y sus estados. Otros elementos, como imágenes y fuentes, también pueden estar presentes en esta pestaña, y puede ver todas esas solicitudes y el tamaño de cada archivo después de que se haya procesado la solicitud.
el desempeño
Cuando abra la pestaña Rendimiento, deberá hacer clic en el botón Iniciar registro de rendimiento para que Inspect recopile la información. En unos segundos, SPS detectará qué marcos se están ejecutando en la página, qué eventos del Modelo de objetos del documento (DOM) se han producido y el recálculo del patrón, junto con el tiempo (normalmente en milisegundos) que tardaron en cargarse estos elementos.
Para este sitio, puede ver el evento DOM sombreado, el desplazamiento del mouse tardó 6.03 ms en cargarse. El promedio de FPS para esta página fue de alrededor de 39. El gráfico que muestra mi conjunto de tiempos de respuesta fue de 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 la información. Para mí, se creó un mapa de eventos que muestra alrededor de 600 KB de cadenas, 1 MB de objetos y 1 MB de scripts que se encuentran en la memoria. Puede ver estos mismos elementos de dos maneras 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 el sitio web puede haber colocado en su PC. 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 lateral derecho que esta cookie caducará a mediados de la próxima década y que llegué a ella durante mi sesión de escritura.
Conclusión
Hay mucho por lo que pasar cuando se usa el visor de Firefox. Esta introducción a múltiples partes debería mantenerlo ocupado por un tiempo.
Tómese su tiempo para cambiar elementos HTML específico del sitio. Visite algunos sitios web diferentes para ver sus tiempos de carga. Vea cuántas cookies una página en particular está tratando de almacenar en su dispositivo. A veces, esta información puede brindarle información importante.
Esperamos que esta excursión le brinde una mejor comprensión de lo que hacen los sitios web para que puedan funcionar como usted espera. Esto puede ser mucho más de lo que te hayas dado cuenta previamente.
