web-dev-qa-db-ja.com

ブラウザーがブラウザー開発ツールで使用しているsrcsetイメージを確認することは可能ですか?

私は、ブラウザの開発ツールを使用して、ブラウザが使用しているsrcsetイメージを確認しようとしましたが、ネットワークタブを使用して、取得できないイメージを確認することはできません。

通常、ネットワークタブの使用は問題ありませんが、異なるサイズの2つのイメージバージョンを取得することに気づいたことがあります。これは、1つのブレークポイントが600で、別のブレークポイントが900で、ブラウザーの幅が現在750pxである場合に発生します。

(Chrome&FireFoxでこれを試しました。特定の場合にchromeは両方の画像をプルダウンしますが、FireFoxは1つだけをプルダウンするようです。 )

私が知りたい理由は、ブラウザウィンドウを拡大縮小するときに自動的にスワップする2つの画像srcsetをプルダウンすることに興味があるのですか?これは、実際のimg srcsetオプションではなく、img要素の生のhtmlを提供するだけなので、要素を検査することではわかりません。

58
sam

chrome開発者ツールは要素を検査し、[プロパティ]タブをクリックします。currentSrc:のエントリが実際の画像ソースとともに表示されます。

enter image description here

85
landro

OK、クロムの要素を調べに行きます。 [ネットワーク]タブをクリックして、ページを更新します。

ロードされている画像、それらにかかる時間、サイズが表示されます。

4

今日これに問題があり、変数を監視できることがわかりました。

  1. コンソールドロワーを表示する(ESCを押しても実行できます)

enter image description here

  1. ライブ式を作成します(2、選択した要素のcurrentSrc、innerWidthを作成しました)

enter image description here

ライブ式は、選択されたimgタグの現在のsrcsetを監視します。 pictureタグ内のimgでも機能します。

0
Doc Kodam

私もそう思っていました。開発者ツールを使用せずにそれを理解したと思います。

確認するには、右クリックして名前を付けて保存するだけで、どのファイル名が入力されているかを確認します(高解像度の画像または低解像度の画像と一致したかどうか)。

質問の一部に対する答えは「いいえ」でした。ブラウザーのサイズを変更したときに、すべてのブラウザーが異なるsrcsetイメージソース間で自動的にスワップするわけではありません。 2018年8月に、いくつかの異なるWindowsデスクトップブラウザーで確認しました。一部のユーザーは異なる応答をしましたが、ほとんどのユーザーは、その後も更新するまで画像を交換しませんでした。

どの画像が実際にダウンロードされたか、または一度に複数の画像がダウンロードされたかどうかを直接調査しませんでした。実際に表示される画像と、ブラウザのサイズ変更時にその画像が変更されたかどうかのみをテストしました。私は結果に基づいて仮定を行いましたが、これは100%真実である場合もそうでない場合もありますが、迅速で汚れた良いスタートのように思えました。

0
Jeremy Mallin