2015-06-17 47 views
27

我一直試圖通過瀏覽器開發人員工具查看我的瀏覽器正在使用的圖像,但除了使用網絡選項卡查看哪個圖像它提取我不知道。是否有可能通過瀏覽器開發人員工具查看瀏覽器正在使用哪個srcset圖像

使用網絡選項卡通常會很好,但有時我會注意到它會以不同大小獲取2個圖像版本,如果一個斷點在600,另一個在900,而瀏覽器當前在寬750px。

(IVE試過這兩個在Chrome &火狐,似乎鑲邊將拉低兩個圖像在某些情況下,但Firefox似乎永遠只拉下一個)

我想知道的原因是我」米感興趣,如果它拉下兩個圖像srcset劑量它自動交換它們之間自動調整瀏覽器窗口?這是不能通過檢查元素,它只是給出img元素的原始html,而不是它使用的實際img srcset選項。

+0

圖像之間的交換聽起來有點像js。嘗試檢查可能有點痛苦的自定義js文件。我相信如果它根據屏幕大小交換兩個圖像,那麼它可能是Jquery或純Js在這一點上做的工作。該網站也可以使用媒體查詢。 –

+0

你問是否在頁面加載時加載兩個圖像? –

+0

Definatly不是JS加載圖像,我創建了頁面作爲srcset圖像測試,並且真正擁有一個純粹的html結構,只有''中的圖像標籤。 @AdamBuchananSmith正確,因爲當頁面只加載1個圖像這是唯一它可以使用 – sam

回答

41

在Chrome開發者工具檢查元素,然後單擊屬性選項卡。你會看到一個currentSrc的條目:帶有實際的圖像源。

enter image description here

+1

與Firefox中的Firebug相同。 –

+2

如果你發現自己經常這樣做,選擇元素,並在鼠標懸停在IMG的檢查,現在也應該顯示在工具提示中currentSrc屬性DevTools控制檯 –

+0

鍵入'$ 0.currentSrc'。 – Splatbang

3

好吧,去檢查鉻中的元素。點擊網絡標籤,然後刷新頁面。

它會顯示正在加載的圖像,它們所花費的時間和大小。

+0

@sam這是你在找什麼? –

+0

這不會回答這個問題,因爲OP在問題中說他已經試過了。 – mik01aj

相關問題