google-chrome-devtools - 如何确定哪个源代码使用 Firefox/Chrome 请求了图像？

我需要在我的笔记本电脑上本地安装我的 ISP 托管的 Magento 网站。我已经获取了所有源和数据库，并设法连接了所有东西，除了图像。我无法从滑块或产品目录中看到图像。

从 Firefox 开发人员工具中，我检查了目录页面，我看不到任何图像的 404。所以没有组件请求图像。

然后我访问了在线站点并查看了 Firefox 网络面板中的图像：

您可以看到的图像路径在 Web 服务器中不可用，所以我真的不知道站点的哪个部分实际请求了图像。

是否可以从网络面板确定哪个组件（例如 CSS、Javascript 等）请求了图像？我完全不介意这是否仅在 Chrome 中可用。

标签： google-chrome-devtoolsfirefox-developer-tools

Chrome 和 Firefox DevTools 都提供了一种在其网络面板中显示请求来源的方法。

在 Chrome 中，您可以在Initiator列中看到该信息：

在 Firefox 中，它被称为Cause：

目前的 Chrome DevTools（从 Chrome 78 与 Firefox 70 开始）比 Firefox DevTools 提供了更多关于请求的确切来源的信息。因此，我为 Firefox DevTools 创建了一个功能请求，以便为网络请求的原因添加更详细的信息。