Можно ли увидеть, какое изображение srcset используется браузером с помощью инструментов разработчика браузера

Я пытался увидеть, какой srcset образ, который использует мой браузер, с помощью инструментов разработчика браузеров, но помимо использования вкладки в сети, чтобы увидеть, какое изображение он извлекает, я не могу сказать.

Использование вкладки в сети, как правило, было бы неплохо, но иногда я заметил, что он будет получать две версии изображений разных размеров, это произойдет, если одна точка прерывания будет равна 600, а другая - 900, а браузер в настоящий момент - 750 пикселей широкий.

(Ive пробовал это как в Chrome, так и в FireFox, и кажется, что в некоторых случаях хром будет сбрасывать оба изображения, но FireFox, похоже, когда-либо вытаскивает один)

Причина, по которой я хочу знать, мне интересна, если она сбрасывает две дозы изображения srcset, они меняются автоматически, когда я масштабирую окно браузера? Это невозможно определить, поскольку, проверяя элемент, он просто дает исходный HTML-элемент img, а не фактический параметр img srcset, который он использует.

Ответ 1

В хром разработчики проверяют элемент, затем перейдите на вкладку свойств. Вы увидите запись для currentSrc: с фактическим источником изображения.

Ответ 2

ОК, перейдите к проверке элемента в хроме. Перейдите на вкладку сети и обновите страницу.

Он покажет вам загружаемые изображения, время, которое они берут, и размер.

Ответ 3

Мне тоже было интересно. Я думаю, что я понял это без использования каких-либо инструментов разработчика.

Чтобы проверить, я просто щелкнул правой кнопкой мыши и сохрани-как, чтобы увидеть, какое имя файла было заполнено (и соответствует ли оно моему изображению с высоким разрешением или изображению с низким разрешением).

Ответ на часть вашего вопроса был Нет, не все браузеры автоматически переключаются между различными источниками изображений srcset при изменении размера браузера. Я проверил в августе 2018 года с несколькими различными браузерами Windows. Некоторые реагировали по-разному, но большинство не меняли изображение, если только вы не нажали "Обновить после".

Я непосредственно не исследовал, какие изображения на самом деле были загружены или были ли более одного за раз. Я только проверял, какое изображение было на самом деле отображено и изменилось ли это изображение в браузере. Я сделал предположения, основанные на результатах, которые могут или не могут быть верными на 100%, но казались быстрым и грязным хорошим началом.

Ответ 4

У меня были проблемы с этим сегодня, и я обнаружил, что вы можете контролировать переменную:

Показать ящик консоли (Вы можете сделать это, нажав ESC тоже)

Создать живое выражение (я создал 2, currentSrc выбранного элемента и innerWidth)

Живое выражение отслеживает текущий srcset выбранного тега img. Это работает с img внутри тега изображения тоже.