在 devtools 中查找对自己页面的第二次调用的来源

如何解决在 devtools 中查找对自己页面的第二次调用的来源

调试一个页面，我看到对页面进行了两次调用，一个是初始调用，另一个是在收到第一个调用并且浏览器解析文档时进行的。但是，我无法找到第二个电话的来源。我已经构建了 javascript i dev 模式，所以我有源映射，但调用似乎源自 html 代码本身。查看 devtools 的 Network 选项卡，我看到了这个

在 Chrome 和这个

在 Firefox 中

Firefox 似乎将 Initiator 识别为图像，但没有详细说明是什么图像。

我应该在代码中寻找什么来找到调用的来源？我还能做些什么来获取有关呼叫来源的更多详细信息？

更新： 单击 Chrome 中的启动项标记文档中的第一个 Doctype 行

解决方法

请求被识别为图像表明 <img> HTML 元素或 url() CSS 函数具有引用文档本身而不是图像的 URL。

检查 HTML

根据我的测试，当 src 属性为空时不会发生这种情况，但当您将其设置为页面上的锚点时会发生这种情况。

因此，为了找到罪魁祸首，请转到 Inspector (Firefox) 或 Elements (Chrome) 面板，然后按 Ctrl+ F（Windows、Linux）或 Cmd+F（macOS）并搜索 img[src^="#"]。这将查找所有具有 <img> 属性且值以哈希开头的 src 元素。

检查 CSS

当 CSS url() 函数设置为空字符串（即 url()、url('') 或 url("")）时，浏览器（错误地）发送网络请求。

要检查它是否设置在 HTML 元素之一的 style 属性中，请在 Inspector 中搜索 url('') 和 url()，如上所述.

如果在那里找不到，您需要在样式表中搜索。

Chrome

在 Chrome 中，这可以通过按 Ctrl+Shift+F（Windows、Linux）或 Cmd 来实现+Shift+F (macOS) 而焦点在 DevTools 中。这样做会打开一个搜索工具，允许在所有加载的源中进行搜索。在其中输入 url('') 并按 Enter。如果没有找到，请使用 url("") 和 url() 重试。

火狐

不幸的是，在 Firefox 中还没有这样的全局搜索（从 Firefox 85 开始）。尽管有两种其他方式可以搜索样式表。

1. 通过样式编辑器
   Style Editor 允许您检查样式表，但您必须通过在左侧选择它然后按 Ctrl+F 来分别搜索每个样式表（Windows、Linux）或 Cmd+F (macOS)，输入 url()、url('') 或 url("") 并点击 输入。

2. 通过网络监视器
   有一项功能可以让您search through the network request reponses within the Network Monitor。单击放大镜按钮，打开搜索工具。在输入字段中输入 url()、url('') 或 url("") 并按 Enter。