浏览器检查器如何知道图像或其他资源是不是属于加载失败的 css 或 js 文件？

Posted 2023-03-07

【中文标题】浏览器检查器如何知道图像或其他资源是不是属于加载失败的 css 或 js 文件？

【英文标题】：Browser Inspector how to know if image or other resources belongs to which css or js file that was failed to load?浏览器检查器如何知道图像或其他资源是否属于加载失败的 css 或 js 文件？

【发布时间】：2018-02-03 09:51:55

【问题描述】：

我可以在我的网页中看到一些未加载的图像，原因是 css 或 js 文件中的路径错误，但如何知道哪个 js 或 css 文件正在尝试加载该资源。我在浏览器的检查器中尝试了太多以找到某种方法，但我无法弄清楚，所以我必须在每个 js 和 css 文件中搜索资源名称。有什么方法可以知道尝试加载失败资源的确切 js 或 css 文件。 谢谢

【参考方案1】：

Firefox 和 Chrome DevTools 提供了一种在其网络面板中查看发起资源请求的方法。

Chrome 开发者工具

Chrome 的 DevTools 中的 Network 面板提供有关 Initiator column 中请求来源的信息。除了说“其他”的条目之外的所有条目都链接到 javascript、CSS 或文档中引起请求的行。 对于 JavaScript 调用，它会显示导致悬停请求的堆栈跟踪。

它甚至允许您通过按住 Shift 并将条目悬停在列表中来highlight the initiators and dependencies。

Firefox 开发工具

Firefox DevTools 网络监视器有一个 Cause column 指示请求是否来自 JavaScript、文档、CSS 或其他来源。

对于JavaScript调用，它在选择条目时提供堆栈跟踪 EM>侧栏中的堆栈跟踪。

不幸的是，对于 JavaScript 以外的其他原因，它还没有提供太多有用的信息或指向源文件的链接（从 Firefox 55 开始）。因此我已经filed several enhancement requests 来改进这个功能。