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

时间:2014-02-18 23:31:06

标签: firefox dom search firefox-developer-tools

我正在使用Firefox DevTools,而我正在使用 Inspector 标签,其中显示了HTML树。

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

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

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

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

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

6 个答案:

答案 0 :(得分:12)

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

顺便说一下。自Firebug 2.0以来,您还可以使用HTML panel using CSS selectors进行搜索(除纯文本搜索外)。

答案 1 :(得分:7)

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

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

答案 2 :(得分:5)

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

Ctrl + G 查找下一步, Ctrl + Shift + G 找到以前的。

答案 3 :(得分:3)

解决方法:在检查器中,右键单击最外面的标记,然后单击“复制内部HTML”。粘贴在文字处理器中并在那里搜索。

答案 4 :(得分:0)

请参阅answer

作为在开发工具中搜索的替代方法......

  • 右键点击页面
  • 选择查看来源

在源视图中,您可以通过在mac上执行ctrl/fcmd/f轻松执行文本搜索。

答案 5 :(得分:0)

相关问题