html - metadatos - ¿Es posible ver qué imagen srcset está usando un navegador con las herramientas de desarrollo del navegador?
srcset html5 (4)
He estado tratando de ver qué imagen
srcset
mi navegador a través de las herramientas de desarrollo de los navegadores, pero aparte de usar la pestaña de red para ver qué imagen obtiene, no puedo decirlo.
El uso de la pestaña de red generalmente estaría bien, pero a veces he notado que obtendrá 2 versiones de imágenes en diferentes tamaños, esto sucedería si un punto de interrupción está en 600 y otro en 900 y el navegador tenía actualmente 750px de ancho.
(He intentado esto tanto en Chrome como en FireFox, y parece que Chrome derribará ambas imágenes en ciertos casos, pero FireFox parece que solo baja una)
La razón por la que quiero saber es que me interesa si se despliegan dos dosis de srcset de imagen, ¿se intercambia automáticamente entre ellas cuando escalo la ventana del navegador?
Esto no puede decirse, ya que al inspeccionar el elemento solo da el html sin procesar del elemento
img
, no la opción
img srcset
real que
img srcset
usando.
En las herramientas de desarrollador de Chrome, inspeccione el elemento, luego haga clic en la pestaña de propiedades. Verá una entrada para currentSrc: con la fuente de imagen real.
Me preguntaba eso también. Creo que lo descubrí sin usar ninguna herramienta de desarrollador.
Para verificar, simplemente hice clic derecho y guardar como para ver qué nombre de archivo se completó (y si coincidía con mi imagen de alta resolución o la de baja resolución).
La respuesta a parte de su pregunta fue No, no todos los navegadores cambian automáticamente entre diferentes fuentes de imágenes srcset cuando cambia el tamaño del navegador. Revisé en agosto de 2018 con varios navegadores de escritorio de Windows diferentes. Algunos respondieron de manera diferente, pero la mayoría no intercambiaron la imagen a menos que también pulses actualizar después.
No investigué directamente qué imágenes se descargaban realmente o si más de una se descargaban a la vez. Solo probé qué imagen se mostraba realmente y si esa imagen cambió en el cambio de tamaño del navegador. Hice suposiciones basadas en los resultados, que pueden o no ser 100% verdaderos, pero parecían un buen comienzo rápido y sucio.
OK, ve a inspeccionar el elemento en cromo. Haga clic en la pestaña de red, luego actualice la página.
Le mostrará las imágenes que se están cargando, el tiempo que tardan y el tamaño.
Tuve problemas con esto hoy y descubrí que puedes monitorear la variable:
- Muestra el cajón de la consola (también puedes hacerlo presionando ESC)
- Crear expresión en vivo (creé 2, el currentSrc del elemento seleccionado y el innerWidth)
La expresión en vivo observa el srcset actual de la etiqueta img seleccionada. Funciona con el img dentro de la etiqueta de la imagen también.