¿Es posible ver qué imagen de srcset está usando un navegador con las herramientas de desarrollo del navegador?


81

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.


cambiar entre imágenes suena un poco como js. intente verificar los archivos js personalizados que pueden ser un poco molestos. Creo que si está intercambiando dos imágenes según el tamaño de la pantalla, probablemente sea Jquery o Js puros haciendo el trabajo en ese momento. Ese sitio web también puede utilizar consultas de medios.
Entusiasta de la codificación

¿Estás preguntando si cuando se carga la página, se cargan ambas imágenes?
Adam Buchanan Smith

Definitivamente no JS cargando la imagen, creé la página como una prueba de imagen srcset y realmente tiene una estructura html desnuda con solo una etiqueta de imagen en el <body>. @AdamBuchananSmith correcto, ya que cuando la página solo carga la imagen 1, es la única que podría usar
sam

Respuestas:


117

La imagen tiene una propiedad currentSrc, puede registrarla o inspeccionarla con varias herramientas:

  • En las herramientas de desarrollo de Chrome, inspeccione el elemento y luego haga clic en la pestaña de propiedades.
  • En las herramientas de desarrollo de Firefox, inspeccione el elemento, haga clic derecho y seleccione DOM en el menú contextual.

Verá una entrada para currentSrc: con la fuente de imagen real.

ingrese la descripción de la imagen aquí


29
Si se encuentra haciendo esto con bastante frecuencia, seleccione el elemento y escriba $0.currentSrcen la consola DevTools
Nacho Coloma

3
Al pasar el cursor sobre la imagen en el inspector ahora también debería aparecer el atributo currentSrc en la información sobre herramientas.
Splatbang

@Splatbang sí, pero cuando la URL es muy larga, la recorta, por lo que es posible que no vea lo que
busca

Ojalá Firefox tuviera algo similar
Jon z

también es útil para URL largas, copiando directamente al portapapeles (en Chrome):copy($0.currentSrc)
ptim

13

Tuve problemas con esto hoy y descubrí que puedes monitorear la variable:

  1. Muestre el cajón de la consola (puede hacerlo presionando ESC también)

ingrese la descripción de la imagen aquí

  1. Crear expresión en vivo (creé 2, el currentSrc del elemento seleccionado y el innerWidth)

ingrese la descripción de la imagen aquí

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.


1
En mi opinión, esta es la mejor respuesta para hoy (2020). Tuve algunos problemas con la respuesta aceptada donde Chrome no estaba completando o actualizando la pestaña Propiedades correctamente. Esto pasa por alto ese problema y pone el resultado al frente y ... eh ... al final, supongo. : p
Sandwich

5

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.


@sam ¿es esto lo que estás buscando?
Adam Buchanan Smith

esto no responde a la pregunta porque OP declaró en la pregunta que ya intentó esto.
mik01aj

1

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.


0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.