Чи можна побачити, яке зображення srcset використовує браузер за допомогою інструментів розробника браузера

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

Як правило, використання мережевої вкладки було б нормальним, але іноді я помічав, що вона отримує 2 версії зображень різного розміру, це траплялося б, якщо одна точка розриву дорівнює 600, а інша - 900, а в даний час браузер має ширину 750 пікселів.

(Я пробував це як у Chrome, так і у FireFox, і, схоже, хром у певних випадках зніме обидва зображення, але, здається, FireFox ніколи не знімає лише одне)

Причиною, яку я хочу знати, є те, що мене цікавить, якщо воно витягує дозу двох зображень srcset, автоматично перемикається між ними, коли я масштабую вікно браузера? Це не можна сказати, оскільки, перевіряючи елемент, він просто надає необроблений html imgелемента, а не фактичний img srcsetваріант його використання.

Зображення має властивість currentSrc, ви можете зареєструвати його або перевірити за допомогою декількох інструментів:

• У інструментах розробника chrome огляньте елемент, а потім натисніть вкладку властивостей.
• У інструментах розробника Firefox огляньте елемент, клацніть правою кнопкою миші та виберіть DOM у контекстному меню.

Ви побачите запис для currentSrc: з фактичним джерелом зображення.

У мене сьогодні були проблеми з цим, і я виявив, що ви можете контролювати змінну:

1. Показати шухляду консолі (Ви можете це зробити, натиснувши також ESC)

2. Створити живий вираз (я створив 2, currentSrc виділеного елемента та innerWidth)

Вираз у реальному часі спостерігає за поточним srcset вибраного тегу img. Це також працює з img всередині тегу зображення.

Добре, перейдіть до перевірки елемента в хромі. Клацніть на вкладку мережі, а потім оновіть сторінку.

Він покаже вам завантажувані зображення, час і розмір.

Натрапив на це з тим самим питанням. Моїм простим рішенням було просто клацнути зображення правою кнопкою миші та "Відкрити зображення на новій вкладці / вікні".

Швидке і просте рішення, і ви можете побачити, яке зображення завантажується в різних точках розриву.

Мені теж це було цікаво. Думаю, я це зрозумів, не використовуючи ніяких інструментів розробника.

Щоб перевірити, я просто клацнув правою кнопкою миші та зберіг, щоб побачити, яке ім’я файлу було заповнене (і чи відповідало воно моєму зображенню з високою роздільною здатністю чи низькому дозволу).

Відповідь на частину Вашого запитання була Ні, не всі браузери автоматично перемикаються між різними джерелами зображень srcset, коли Ви змінюєте розмір браузера. У серпні 2018 року я перевірив кілька різних браузерів для настільних комп'ютерів Windows. Деякі реагували по-різному, але більшість не міняли зображення місцями, якщо ви також не натискаєте кнопку оновлення після.

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