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

【问题标题】：How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?如何在 Chrome 开发者工具中使用 XPath 或 CSS 选择器搜索 DOM 元素？
【发布时间】：2011-08-05 15:17:54
【问题描述】：

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

有人知道怎么用吗？

【问题讨论】：

标签： dom google-chrome google-chrome-devtools

【解决方案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 选择器搜索元素。

【讨论】：