如何在Firefox DevTools的Inspector选项卡中进行简单搜索？

Question

我正在使用Firefox DevTools并且我正在使用Inspector选项卡,其中显示了HTML树.

当我使用该Search HTML功能时,它只搜索标签.所以假设我有这个:

<div class="lol">textinsidediv</div>

当我搜索'div'时,它会相应地返回<div>.但是,如果我搜索'textinside',它与内容中的文本不匹配,尽管它正在那里开始.

我的问题:如何在此HTML树中搜索任意字符串？

(相反,Firebug正如预期的那样执行简单的文本搜索.)

Answer 1

Firefox DevTools 的Inspector面板中的搜索允许搜索自Firefox 45以来的文本内容(参见bug 835896).

顺便说一句.从Firebug 2.0开始,您还可以使用CSS选择器在HTML面板中 进行搜索(除了纯文本搜索).

Answer 2

它不是一些真正无用的html标签搜索,它实际上搜索CSS选择器(与你使用css,javascript中的querySelector或jQuery选择器相同)

因此,您可以搜索#id,通过搜索遍历某个类的.class所有元素,甚至可以搜索包含文本属性的所有元素,例如,[class*="o"]应该在类属性中为所有元素提供字母o.这对于设计人员/开发人员想要查找的内容很有帮助 - 要查找文本,您可以在页面内Ctrl+ F,然后右键单击,检查元素.

Answer 3

一个好主意是复制内部HTML,但更好的是编辑为HTML.这会显示一个显示全文的就地面板,可以使用Ctrl+ F或cmd+ 进行搜索F.

Ctrl+ G找到下一个,Ctrl+ Shift+ G找到前一个.