为什么在 devtool 中搜索结果数量急剧下降？

Question

我在 devtool 中进行了简单的搜索，但它无缘无故地急剧下降:

而且，如果我查看源码并进行同样的搜索，<link rel的结果数只有58个，而不是184个。你知道为什么吗？

_{这里是page如果需要检查}

Answer 1

Devtools 使用 CDP 命令 DOM.performSearch and judging by the implementation 它尝试匹配这些类型的查询：

• text - 在 #text 节点内（如 js 中的 textContent）

• text - 内部标签名称

• text - 内部属性名称

• text - 内部属性值

• <tag - 在标签名称的开头匹配

• </tag - 匹配结束标签

• tag> - 在标签名称末尾匹配

• <tag> - 匹配整个标签名称

• "text - 在属性值的开头匹配

• text" - 在属性值末尾匹配

• text - 匹配整个属性值

• //a[contains(., 'foo')] - XPath 选择器

• a#foo.class[attr] - CSS 选择器

如您所见，文字文本匹配仅限于前四种类型，它不会找到跨越一种以上类型的内容，例如跨越两种类型的 attr="value"。

对于这些“复杂”的查询，您必须使用 XPath 或 CSS:

• //link[@rel]
• //link[contains(@rel,'style')]

对于像 a 这样的普通 CSS 选择器，请改用 html a 以确保它不匹配文字文本。