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

Question

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

Answer 1

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

Chrome 开发者工具

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



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

Firefox 开发者工具

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

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



不幸的是，对于 JavaScript 以外的原因，它还没有提供很多有用的信息或源文件的链接(从 Firefox 55 开始)。因此我有 filed several enhancement requests来改进这个功能。