2015-06-17 14 views
27

Ho cercato di vedere quale immagine srcset viene utilizzata dal browser tramite gli strumenti di sviluppo del browser, ma a parte l'utilizzo della scheda di rete per vedere quale immagine recupera non posso dirlo.È possibile vedere quale immagine di srcset viene utilizzata da un browser con gli strumenti di sviluppo del browser

L'utilizzo della scheda di rete di solito andava bene, ma a volte ho notato che recupererà 2 versioni di immagini di dimensioni diverse, questo avverrebbe se un punto di interruzione è a 600 e un altro a 900 e il browser era al momento 750 px di larghezza.

(Ive ha provato questo sia su Chrome & FireFox, e sembra che Chrome tirerà giù entrambe le immagini in alcuni casi, ma Firefox sembra tirare sempre e solo verso il basso uno)

Il motivo che voglio sapere è I' m interessato se tira giù due immagine srcset dose si scambia automaticamente tra loro mentre scala la finestra del browser? Questo non si può dire come ispezionando l'elemento che fornisce l'html grezzo dell'elemento img, non l'effettiva opzione img srcset che usa.

+0

lo scambio tra le immagini suona un po 'come js. prova a controllare i file js personalizzati che potrebbero essere un po 'dolorosi. Credo che se si scambiano due immagini a seconda delle dimensioni dello schermo, probabilmente è Jquery o Js puro a fare il lavoro in quel punto. Quel sito Web può anche utilizzare le query multimediali. –

+0

Stai chiedendo se quando la pagina viene caricata sta caricando entrambe le immagini? –

+0

Sicuramente non JS che carica l'immagine, ho creato la pagina come test di immagine srcset e in realtà ha una struttura html nuda con solo un tag immagine nel ''. @AdamBuchananSmith corretto, come quando la pagina carica solo l'immagine 1 che è la sola che potrebbe usare – sam

risposta

41

Negli strumenti di sviluppo di Chrome, ispezionare l'elemento, quindi fare clic sulla scheda delle proprietà. Verrà visualizzata una voce per currentSrc: con la sorgente dell'immagine effettiva.

enter image description here

+1

Lo stesso funziona con Firebug in Firefox. –

+2

Se ci si trova spesso in questo modo, selezionare l'elemento e digitare '$ 0.currentSrc' nella console DevTools –

+0

Passare con il mouse su img nell'ispettore ora dovrebbe visualizzare anche l'attributo currentSrc nel suggerimento. – Splatbang

3

OK, andare a controllare l'elemento in cromo. Fare clic sulla scheda di rete, quindi aggiornare la pagina.

Vi mostrerà le immagini che vengono caricate, il tempo che impiegano e la dimensione.

+0

@sam è questo quello che stai cercando? –

+0

questo non risponde alla domanda perché OP ha dichiarato nella domanda che ha già provato questo. – mik01aj