He estado tratando de ver qué srcsetimagen está usando mi navegador a través de las herramientas de desarrollo de navegadores, pero aparte de usar la pestaña de red para ver qué imagen obtiene, no puedo decirlo.
Usar la pestaña de red normalmente estaría bien, pero a veces he notado que obtendrá 2 versiones de imagen en diferentes tamaños, esto sucedería si un punto de interrupción está en 600 y otro en 900 y el navegador tiene actualmente 750 px de ancho.
(Probé esto tanto en Chrome como en FireFox, y parece que Chrome bajará ambas imágenes en ciertos casos, pero FireFox parece que solo baja una)
La razón por la que quiero saber es que estoy interesado si se despliegan dos imágenes srcset. ¿Se intercambian automáticamente a medida que escalo la ventana del navegador? Esto no se puede decir, ya que al inspeccionar el elemento, solo da el html sin procesar del imgelemento, no la img srcsetopción real que está usando.
<body>. @AdamBuchananSmith correcto, ya que cuando la página solo carga la imagen 1, es la única que podría usarRespuestas:
La imagen tiene una propiedad currentSrc, puede registrarla o inspeccionarla con varias herramientas:
Verá una entrada para currentSrc: con la fuente de imagen real.
fuente
$0.currentSrcen la consola DevToolscopy($0.currentSrc)Tuve problemas con esto hoy y descubrí que puedes monitorear la variable:
La expresión en vivo observa el srcset actual de la etiqueta img seleccionada. También funciona con la imagen dentro de la etiqueta de imagen.
fuente
Bien, ve a inspeccionar el elemento en cromo. Haga clic en la pestaña de red, luego actualice la página.
Te mostrará las imágenes que se están cargando, el tiempo que tardan y el tamaño.
fuente
Llegué a esto con la misma pregunta. Mi solución simple fue hacer clic derecho en la imagen y 'Abrir imagen en una nueva pestaña / ventana'.
Solución rápida y fácil y puede ver qué imagen se carga en diferentes puntos de interrupción.
fuente
Yo también me preguntaba eso. Creo que lo descubrí sin usar ninguna herramienta de desarrollo.
Para comprobarlo, simplemente hice un clic derecho y guardé 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 intercambian automáticamente entre diferentes fuentes de imágenes srcset cuando cambia el tamaño del navegador. Lo comprobé en agosto de 2018 con varios navegadores de escritorio de Windows diferentes. Algunos respondieron de manera diferente, pero la mayoría no intercambió la imagen a menos que también presione actualizar después.
No investigué directamente qué imágenes se estaban descargando realmente o si se estaban descargando más de una a la vez. Solo probé qué imagen se mostró realmente y si esa imagen cambió al cambiar el tamaño del navegador. Hice suposiciones basadas en los resultados, que pueden o no ser 100% verdaderos, pero me pareció un buen comienzo rápido y sucio.
fuente