是否可以通过浏览器开发工具查看浏览器正在使用哪个 srcset 图像
Is it possible to see which srcset image a browser is using with browser developer tools
我一直试图通过浏览器开发者工具查看我的浏览器正在使用哪个 srcset 图片，但除了使用网络选项卡查看它获取的图片外，我无法分辨。
使用网络选项卡通常没问题，但有时我注意到它会获取 2 个不同大小的图像版本，如果一个断点在 600，另一个在 900，并且浏览器当前是750px 宽。
（我在 Chrome 和 FireFox 上都试过了，似乎 chrome 在某些情况下会拉下两个图像，但 FireFox 似乎只拉下一个）
我想知道的原因是，如果它拉下两个图像 srcset 并在我缩放浏览器时自动在它们之间交换，我感兴趣 window？这不能通过检查元素来判断，它只是给出 img 元素的原始 html，而不是它使用的实际 img srcset 选项。
好的，去检查 chrome 中的元素。单击网络选项卡，然后刷新页面。
它将向您显示正在加载的图像、它们花费的时间和大小。
图像有一个 属性 currentSrc，您可以记录它或使用多种工具检查它：
- 在 chrome 开发人员工具中检查元素，然后单击属性选项卡。
- 在 Firefox 开发人员工具中检查元素，右键单击并从上下文菜单中 select DOM。
您将看到 currentSrc: 的条目以及实际的图像源。
我也想知道。我想我没有使用任何开发工具就解决了这个问题。
为了检查，我只是右击并另存为以查看填写的文件名（以及它是否与我的高分辨率图像或低分辨率图像匹配。）
部分问题的答案是否定的，并非所有浏览器都会在您调整浏览器大小时自动在不同的 srcset 图像源之间切换。我在 2018 年 8 月检查了几种不同的 Windows 桌面浏览器。有些人的反应不同，但大多数人没有交换图像，除非你之后也点击刷新。
我没有直接调查实际下载了哪些图像，或者一次是否下载了多个图像。我只测试了实际显示的图像以及该图像是否在浏览器调整大小时发生了变化。我根据结果做出了假设，这可能是也可能不是 100% 正确，但似乎是一个快速而肮脏的好开始。
我今天遇到了问题，我发现你可以监控变量：
- 显示控制台抽屉（按ESC也可以）
- 创建live expression（我创建了2个，选中元素的currentSrc和innerWidth）
实时表达式监视所选 img 标签的当前 srcset。它也适用于图片标签内的 img。
遇到同样的问题。我的简单解决方案是右键单击图像和 'Open Image on New Tab / Window'.
快速简单的解决方案，您可以看到在不同断点处加载的图像。
我一直试图通过浏览器开发者工具查看我的浏览器正在使用哪个 srcset 图片，但除了使用网络选项卡查看它获取的图片外，我无法分辨。
使用网络选项卡通常没问题，但有时我注意到它会获取 2 个不同大小的图像版本，如果一个断点在 600，另一个在 900，并且浏览器当前是750px 宽。
（我在 Chrome 和 FireFox 上都试过了，似乎 chrome 在某些情况下会拉下两个图像，但 FireFox 似乎只拉下一个）
我想知道的原因是，如果它拉下两个图像 srcset 并在我缩放浏览器时自动在它们之间交换，我感兴趣 window？这不能通过检查元素来判断，它只是给出 img 元素的原始 html，而不是它使用的实际 img srcset 选项。
好的，去检查 chrome 中的元素。单击网络选项卡，然后刷新页面。
它将向您显示正在加载的图像、它们花费的时间和大小。
图像有一个 属性 currentSrc，您可以记录它或使用多种工具检查它：
- 在 chrome 开发人员工具中检查元素，然后单击属性选项卡。
- 在 Firefox 开发人员工具中检查元素，右键单击并从上下文菜单中 select DOM。
您将看到 currentSrc: 的条目以及实际的图像源。
我也想知道。我想我没有使用任何开发工具就解决了这个问题。
为了检查，我只是右击并另存为以查看填写的文件名（以及它是否与我的高分辨率图像或低分辨率图像匹配。）
部分问题的答案是否定的，并非所有浏览器都会在您调整浏览器大小时自动在不同的 srcset 图像源之间切换。我在 2018 年 8 月检查了几种不同的 Windows 桌面浏览器。有些人的反应不同，但大多数人没有交换图像，除非你之后也点击刷新。
我没有直接调查实际下载了哪些图像，或者一次是否下载了多个图像。我只测试了实际显示的图像以及该图像是否在浏览器调整大小时发生了变化。我根据结果做出了假设，这可能是也可能不是 100% 正确，但似乎是一个快速而肮脏的好开始。
我今天遇到了问题，我发现你可以监控变量：
- 显示控制台抽屉（按ESC也可以）
- 创建live expression（我创建了2个，选中元素的currentSrc和innerWidth）
实时表达式监视所选 img 标签的当前 srcset。它也适用于图片标签内的 img。
遇到同样的问题。我的简单解决方案是右键单击图像和 'Open Image on New Tab / Window'.
快速简单的解决方案，您可以看到在不同断点处加载的图像。