如何在 Chrome 开发者工具中使用 XPath 或 CSS 选择器搜索 DOM 元素？

Posted 2023-03-07

【中文标题】如何在 Chrome 开发者工具中使用 XPath 或 CSS 选择器搜索 DOM 元素？

【英文标题】：How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?

【发布时间】：2011-08-05 15:17:54

【问题描述】：

文档http://code.google.com/chrome/devtools/docs/elements.html 说它支持 XPath 或 CSS 选择器，但是当我尝试时，它似乎对我不起作用。

有人知道怎么用吗？

【参考方案1】：

您可以在 Chrome javascript 控制台中使用 $x。无需扩展。

例如：$x("//img")

【讨论】：

这是一个有用的答案。要添加到它，$x 函数接受第二个可选参数 context。 $x(xpath, context) 例如，这允许您选择特定的 iframe 内容，并针对它运行 xpath 查询。所以对于第一个 iframe： myframe = document.getElementsByTagName("iframe")[0].contentWindow.document.body; #to xpath 查询表单元格的 iframe：$x("//td",myframe);

要找到一个带有 CSS 选择器的元素，应该使用 $$ 控制台函数，例如$$('body')

更多命令可以在这里找到：developers.google.com/chrome-developer-tools/docs/…

将近 2 年后回到这个问题，是的，这个更好。

非常适合调试 XPath！顺便说一句，$x() 函数也可以在 Safari 命令行 API 中使用。

【参考方案2】：

只需在搜索框中输入 xpath 表达式即可。它在树尖构建中对我有用。

该功能似乎在 Chrome 11 中被破坏了，我对此提交了一个错误：http://crbug.com/79716

【讨论】：

你是对的。它正在工作，但突出显示功能已损坏。我在 Mac os X 上使用 chrome 10.0.*。

下面的 Mark Polito 给出了更好的答案。

它适用于 Chrome 32。转到 devtool 的 Element 选项卡并按 CTRL+S 并搜索 xpath

@eeezyy 你的意思是 ctrl + f ？

【参考方案3】：

对于 xpath 搜索，请使用 $x('xpathSelector')。 对于 CSS 选择器，请使用 $('cssSelector')。

但是，最后一个选择器只返回第一个匹配的元素。如果您想查看所有匹配的元素，请选择$$('cssSelector')

【参考方案4】：

如果您单击元素窗格中的任何元素，然后键入 command-F，它将打开一个搜索栏，让您可以使用 xpath 选择器搜索元素。