Ist es möglich zu sehen, welches srcset-Bild ein Browser mit Browser-Entwicklertools verwendet?

79

Ich habe versucht zu sehen, welches srcsetBild mein Browser über die Entwicklertools des Browsers verwendet, aber abgesehen von der Verwendung der Registerkarte "Netzwerk", um zu sehen, welches Bild er abruft, kann ich nicht sagen.

Die Verwendung der Registerkarte "Netzwerk" ist normalerweise in Ordnung, aber manchmal habe ich festgestellt, dass 2 Bildversionen in unterschiedlichen Größen abgerufen werden. Dies geschieht, wenn ein Haltepunkt bei 600 und ein anderer bei 900 liegt und der Browser derzeit 750 Pixel breit ist.

(Ich habe dies sowohl auf Chrome als auch auf FireFox versucht, und es scheint, dass Chrome in bestimmten Fällen beide Bilder herunterzieht, aber FireFox scheint immer nur eines herunterzuziehen.)

Der Grund, den ich wissen möchte, ist, dass ich interessiert bin, ob es zwei Bild-srcset-Dosen herunterzieht, die automatisch zwischen ihnen ausgetauscht werden, wenn ich das Browserfenster skaliere. Dies kann nicht festgestellt werden, da durch Untersuchen des Elements nur das rohe HTML des imgElements angegeben wird, nicht die tatsächliche img srcsetOption, die es verwendet.

html css responsive-design developer-tools srcset Sam
quelle
Das Wechseln zwischen Bildern klingt ein bisschen wie js. Versuchen Sie, die benutzerdefinierten JS-Dateien zu überprüfen, was ein wenig schmerzhaft sein kann. Ich glaube, wenn es zwei Bilder je nach Bildschirmgröße austauscht, dann ist es wahrscheinlich Jquery oder reine Js, die den Job zu diesem Zeitpunkt erledigen. Diese Website kann auch Medienabfragen verwenden.
Coding Enthusiast
Fragen Sie, ob beim Laden der Seite beide Bilder geladen werden?
Adam Buchanan Smith
Definitiv nicht JS das Bild laden, ich habe die Seite als srcset Bildtest erstellt und hat wirklich eine nackte HTML-Struktur mit nur einem Bild-Tag in der <body>. @AdamBuchananSmith richtig, als wenn die Seite nur das 1 Bild lädt, das das einzige wäre, das sie verwenden könnte
sam

Antworten:

116

Das Bild hat die Eigenschaft currentSrc. Sie können es protokollieren oder mit verschiedenen Tools überprüfen:

  • Überprüfen Sie in Chrome-Entwicklertools das Element und klicken Sie dann auf die Registerkarte Eigenschaften.
  • Überprüfen Sie in den Firefox-Entwicklertools das Element, klicken Sie mit der rechten Maustaste und wählen Sie DOM aus dem Kontextmenü.

Sie sehen einen Eintrag für currentSrc: mit der tatsächlichen Bildquelle.

Geben Sie hier die Bildbeschreibung ein

simsom
quelle
28
Wenn Sie dies häufig tun, wählen Sie das Element aus und geben Sie es $0.currentSrcin die DevTools-Konsole ein
Nacho Coloma
3
Wenn Sie den Mauszeiger über das Bild im Inspektor bewegen, sollte jetzt auch das Attribut currentSrc im Tooltip angezeigt werden.
Splatbang
@Splatbang ja, aber wenn die URL sehr lang ist, schneidet sie ab, so dass Sie möglicherweise nicht sehen, wonach Sie
suchen
Ich wünschte, Firefox hätte etwas Ähnliches
Jon z
auch praktisch für lange URLs, direkt in die Zwischenablage kopieren (in Chrom):copy($0.currentSrc)
ptim
12

Ich hatte heute Probleme damit und stellte fest, dass Sie die Variable überwachen können:

  1. Zeigen Sie die Konsolenschublade an (Sie können dies auch mit ESC tun)

Geben Sie hier die Bildbeschreibung ein

  1. Live-Ausdruck erstellen (Ich habe 2 erstellt, den currentSrc des ausgewählten Elements und die innere Breite)

Geben Sie hier die Bildbeschreibung ein

Der Live-Ausdruck überwacht das aktuelle srcset des ausgewählten img-Tags. Es funktioniert auch mit dem Bild im Bild-Tag.

Doc Kodam
quelle
1
IMO ist dies die beste Antwort für heute (2020). Ich hatte einige Probleme mit der akzeptierten Antwort, bei denen Chrome die Registerkarte "Eigenschaften" nicht korrekt ausgefüllt oder aktualisiert hat. Dies umgeht dieses Problem und bringt das Ergebnis in den Vordergrund und ... ähm ... nach unten, denke ich. : p
Sandwich
5

OK, gehen Sie, um das Element in Chrom zu überprüfen. Klicken Sie auf die Registerkarte Netzwerk und aktualisieren Sie die Seite.

Es zeigt Ihnen die Bilder, die geladen werden, die Zeit und die Größe.

Adam Buchanan Smith
quelle
@sam ist das was du suchst?
Adam Buchanan Smith
Dies beantwortet die Frage nicht, da OP in der Frage angegeben hat, dass er dies bereits versucht hat.
mik01aj
1

Kam mit der gleichen Frage darauf. Meine einfache Lösung bestand darin, einfach mit der rechten Maustaste auf das Bild zu klicken und "Bild auf neuem Tab / Fenster öffnen".

Schnelle und einfache Lösung und Sie können sehen, welches Bild an verschiedenen Haltepunkten geladen wird.

Jemand Besonderes
quelle
0

Das habe ich mich auch gefragt. Ich glaube, ich habe das herausgefunden, ohne Entwicklertools zu verwenden.

Zur Überprüfung habe ich einfach mit der rechten Maustaste geklickt und gespeichert, um zu sehen, welcher Dateiname eingegeben wurde (und ob er mit meinem hochauflösenden oder dem niedrigauflösenden Bild übereinstimmt).

Die Antwort auf einen Teil Ihrer Frage lautete Nein. Nicht alle Browser wechseln automatisch zwischen verschiedenen srcset-Bildquellen, wenn Sie die Größe des Browsers ändern. Ich habe im August 2018 mit verschiedenen Windows-Desktop-Browsern nachgesehen. Einige reagierten anders, aber die meisten tauschten das Bild nur aus, wenn Sie danach auch auf Aktualisieren klicken.

Ich habe nicht direkt untersucht, welche Bilder tatsächlich heruntergeladen wurden oder ob mehrere gleichzeitig vorhanden waren. Ich habe nur getestet, welches Bild tatsächlich angezeigt wurde und ob sich das Bild beim Ändern der Browsergröße geändert hat. Ich habe auf der Grundlage der Ergebnisse Annahmen getroffen, die möglicherweise zu 100% zutreffen oder nicht, aber ein schneller und schmutziger guter Start waren.

Jeremy Mallin
quelle