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

116

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

有人知道如何使用吗？

dom google-chrome google-chrome-devtools

— 波波
source

Answers:

263

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

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

— 马特·波利托（Matt Polito）
source

这是一个有用的答案。作为补充，$ x函数接受第二个可选参数context。$ x（xpath，context）例如，这允许您选择特定的iframe内容，并对其执行xpath查询。因此，对于第一个iframe：myframe = document.getElementsByTagName（“ iframe”）[0] .contentWindow.document.body; ＃到ipath中查询表单元格的xpath：$ x（“ // td”，myframe）;

— 阿道夫·特鲁多

查找具有CSS选择器的元素，应使用$$控制台功能，例如$$（'body'）

— Dmitry Korolyov 2013年

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

— 梅德Polushkin

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

— Bobo 2014年

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

— 奥托G

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

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

— 尤里·塞米卡斯基（Yury Semikhatsky）
source

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

— Bobo

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

— FGM 2013年

它可与Chrome 32一起使用。转到devtool的“元素”选项卡，然后按CTRL + S并搜索xpath

— eeezyy 2014年

@eeezyy您的意思是ctrl + f？

— 框

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

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

— m
source