[解決済み] ブラウザ開発ツールで、ブラウザがどのsrcset画像を使用しているかを確認することは可能ですか？

質問

私は、どの srcset の画像を使用しているか確認しようとしましたが、ネットワーク タブを使用してどの画像を取得したかを確認する以外には、わかりませんでした。

ネットワーク タブを使用しても通常は問題ありませんが、時々、異なるサイズの 2 つの画像バージョンが取得されることに気づきました。

(Ive は Chrome & FireFox の両方でこれを試しましたが、Chrome は特定のケースで両方の画像をプルダウンしますが、Firefox は常に 1 つだけをプルダウンするようです)

私が知りたい理由は、それが2つの画像srcsetをプルダウンする場合、私はブラウザのウィンドウを拡大縮小すると、それは自動的にそれらの間でスワップ用量に興味があるのでしょうか？これは、要素を検査することによって、それはちょうど生のHTMLを与えるので、伝えることはできません。 img 要素の生の HTML が表示されるだけで、実際の img srcset オプションではありません。

どのように解決するのですか？

画像には currentSrc というプロパティがあり、それを記録したり、いくつかのツールで検査したりすることができます。

• クロームデベロッパーツールでは、要素を検査し、プロパティタブをクリックします。
• Firefox のデベロッパー ツールでは、要素を検査し、右クリックして、コンテキスト メニューから DOM を選択します。

実際の画像ソースを含む currentSrc: のエントリが表示されます。