Est-il possible de voir quelle image srcset un navigateur utilise avec les outils de développement de navigateur
J'ai essayé de voir quelle image srcset mon navigateur utilise via les outils de développement de navigateurs, mais en dehors de l'onglet Réseau pour voir quelle image il récupère, je ne le sais pas.
Utiliser l'onglet Réseau conviendrait généralement bien, mais j'ai parfois remarqué qu'il récupèrerait 2 versions d'image de tailles différentes. Cela se produirait si un point d'arrêt était à 600 et un autre à 900 et que le navigateur était actuellement de 750 pixels de large.
(Ive a essayé ceci à la fois sur Chrome et FireFox, et il semble que chrome abaisse les deux images dans certains cas, mais FireFox semble ne jamais en abaisser une)
La raison pour laquelle je veux savoir, c'est que ça m'intéresse que si elle coupe deux doses d'image srcset, elle bascule automatiquement entre elles lorsque je redimensionne la fenêtre du navigateur? Cela ne peut pas dire car en inspectant l'élément, il donne simplement le code HTML brut de l'élément img, pas l'option img srcset réelle qui l'utilise.
Dans les outils de développement chromés, inspectez l’élément, puis cliquez sur l’onglet Propriétés. Vous verrez une entrée pour currentSrc: avec la source d'image réelle.
OK, allez voir l'élément en chrome. Cliquez sur l'onglet réseau, puis actualisez la page.
Il vous montrera les images en cours de chargement, leur temps et leur taille.
J'ai eu des problèmes avec cela aujourd'hui et j'ai constaté que vous pouvez surveiller la variable:
- Montrer le tiroir de la console (vous pouvez aussi appuyer sur ESC)
- Créer une expression vivante (j'ai créé 2, la currentSrc de l'élément sélectionné et la innerWidth)
L'expression en direct surveille le srcset actuel de la balise img sélectionnée. Cela fonctionne aussi avec l'image dans la balise picture.
Je me demandais ça aussi. Je pense que j'ai compris cela sans utiliser aucun outil de développement.
Pour vérifier, j'ai simplement fait un clic droit et sauvegarder sous pour voir quel nom de fichier était rempli (et s'il correspondait à mon image haute résolution ou à l'image basse résolution).
La réponse à une partie de votre question était Non, tous les navigateurs ne basculent pas automatiquement entre différentes sources d’image srcset lorsque vous redimensionnez le navigateur. J'ai vérifié en août 2018 avec plusieurs navigateurs de bureau Windows différents. Certains ont répondu différemment, mais la plupart n’ont pas échangé l’image, sauf si vous avez également appuyé sur Actualiser après.
Je n'ai pas directement recherché quelles images étaient réellement téléchargées ou s'il y en avait plus d'une à la fois. J'ai seulement vérifié quelle image était réellement affichée et si cette image était modifiée lors du redimensionnement du navigateur. J'ai émis des hypothèses sur les résultats, ce qui peut être vrai ou non à 100%, mais cela semblait être un bon début rapide et sale.