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

Question

我正在使用Firefox DevTools，我正在使用检查器选项卡，其中显示HTML树。

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

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

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

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

（相反，Firebug执行简单的文本搜索，就像预期的那样。

Answer 1

在 Firefox DevTools 的检查器面板中搜索允许搜索自 Firefox 45 以来的文本内容（参见错误 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 查找上一个。

Answer 4

解决方法：在检查器中，右键单击最外层的标签，然后单击"复制内部 HTML"。粘贴到文字处理器中并在那里搜索。

Answer 5

这在 FireFox 45 中现已修复...

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching

Answer 6

见答案。

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

• 右键单击任意位置的页面
• 选择查看源

在源视图中，您可以通过在 Mac 上执行ctrl/f或cmd/f来轻松执行文本搜索。