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

如何解决为什么在 devtool 中搜索结果的数量急剧下降？

我在 devtool 中执行了一个简单的搜索，但它无缘无故地急剧下降：

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

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

解决方法

Devtools 使用 CDP 命令 DOM.performSearch 并根据 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 以确保它不会作为文字匹配。