33

我正在使用Firefox DevTools，并且正在使用Inspector选项卡，它在其中显示 HTML 树。

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

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

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

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

（相反，Firebug 会按预期执行简单的文本搜索。）

4

6 回答 6

13

Firefox DevTools的Inspector面板中的搜索允许搜索自 Firefox 45 以来的文本内容（请参阅错误 835896）。

顺便提一句。从 Firebug 2.0 开始，您还可以使用 CSS 选择器在HTML面板 中进行搜索（除了纯文本搜索之外）。

于 2014-02-19T12:13:49.197 回答
9

这不是一些真正无用的 html 标记搜索，它实际上搜索 CSS 选择器（与您在 css、Javascript 中的 querySelector 或 jQuery 选择器中使用的相同）

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

于 2014-02-19T22:00:56.257 回答
5

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

Ctrl+G查找下一个，Ctrl++Shift查找G上一个。

于 2015-06-17T23:19:50.003 回答
3

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

于 2015-03-30T03:01:15.403 回答
0

这现在从 FireFox 45 开始修复......

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

于 2016-01-07T16:20:28.657 回答
0

见答案。

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

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

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

于 2015-11-13T13:05:41.767 回答