我一直试图通过浏览器开发工具查看我的浏览器正在使用哪个srcset图像，但除了使用网络选项卡查看它获取的图像外，我无法分辨。
使用网络选项卡通常是好的，但有时我注意到，它将获取2个不同大小的图像版本，这将发生，如果一个断点是在600和另一个在900和浏览器目前是在750px宽。
(Ive我在Chrome和FireFox上都试过了，Chrome在某些情况下似乎会拉下两张图片，但FireFox似乎只拉下一张）
我想知道的原因是，我感兴趣的是，如果它下拉两个图像srcset，当我缩放浏览器窗口时，它会自动在它们之间交换吗？这是无法判断的，因为通过检查元素，它只给出了img元素的原始html，而不是它使用的实际img srcset选项。
6条答案
按热度按时间jv2fixgn1#
该图像具有属性currentSrc，您可以使用以下几种工具记录或检查该图像：
您将看到currentSrc的条目：与实际的图像源。
nkhmeac62#
今天我遇到了一些问题，我发现您可以监控变量：
1.显示控制台抽屉（您也可以按ESC键）
1.创建live表达式（我创建了2，currentSrc和innerWidth的选定元素）
live表达式监视所选img标签的当前srcset。它也可以处理picture标签中的img。
dy1byipe3#
好的，去chrome中检查元素。点击网络选项卡，然后刷新页面。
它将显示正在加载的图像、所需时间和大小。
fv2wmkja4#
我遇到了同样的问题。我的简单解决方案是右键单击图像和“在新选项卡/窗口中打开图像”。
快速简单的解决方案，你可以看到什么图像是加载在不同的断点。
0x6upsns5#
我也在想这一点。我想我在没有使用任何开发工具的情况下就想通了。
为了检查，我只是做了一个右键单击和另存为，看看什么文件名是填写（以及如果它匹配我的高分辨率图像或低分辨率的。）
你的部分问题的答案是否定的，并不是所有的浏览器都会在你调整浏览器大小时自动在不同的srcset图像源之间交换。我在2018年8月用几个不同的Windows桌面浏览器进行了检查。有些浏览器的React不同，但大多数浏览器都不会交换图像，除非你也点击刷新后。
我没有直接调查哪些图片实际上被下载，或者一次是否有多张图片被下载。我只测试了哪些图片实际上被显示，以及该图片是否在浏览器调整大小时发生了变化。我根据结果做出了假设，这可能是也可能不是100%正确的，但似乎是一个快速而肮脏的良好开端。
bxfogqkk6#
这不是一个快速的解决方案，但它给出了一个明确的答案。
1.上传一张图片--我正在使用wordPress add_image_size（）创建一组图片。
1.打开上传文件，找到图像，在PhotoShop或Gimp中打开它们，在每个图像中写入文件名并重新保存（相同的文件名，相同的位置）。
1.现在，您可以调整窗口大小，调整srcset和大小，直到您满意为止。我很高兴地看到，随着窗口大小的变化，图像也随之变化（无需刷新），通常不会出现明显的闪烁。