如何确定哪个源代码使用 Firefox/Chrome 请求了图像？答案

【问题标题】：How to determine which source code requested an image with Firefox/Chrome?如何确定哪个源代码使用 Firefox/Chrome 请求了图像？
【发布时间】：2020-02-29 12:55:14
【问题描述】：

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

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

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

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

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

【问题讨论】：

在 Chrome 中，您可以将 Initiator 列悬停在网格视图中（当您单击屏幕截图上标题左侧的 x 时显示）。

标签： google-chrome-devtools firefox-developer-tools

【解决方案1】：

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

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

在 Firefox 中它被称为原因：

目前的 Chrome DevTools（从 Chrome 78 与 Firefox 70 开始）比 Firefox DevTools 提供了更多关于请求的确切来源的信息。因此我前段时间创建了一个feature request for the Firefox DevTools to add more detailed info for the cause of network requests。

【讨论】：