如何在Chrome Developer Tools中使用XPath或CSS选择器搜索DOM元素？

Question

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

谁知道如何使用它？

Answer 1

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

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

这是一个有用的答案.要添加它,$ x函数接受第二个可选参数context.$ x(xpath,context)例如,这允许您选择特定的iframe内容,并对其运行xpath查询.所以对于第一个iframe:myframe = document.getElementsByTagName("iframe")[0] .contentWindow.document.body; #to xpath查询表格单元格的iframe:$ x("// td",myframe); (28认同)
要找到一个带有CSS选择器的元素,应该使用$$控制台函数,例如$$('body') (12认同)
可以在此处找到更多命令:https://developers.google.com/chrome-developer-tools/docs/commandline-api#selector (3认同)

Answer 2

只需在搜索框中键入xpath表达式即可.它在树顶构建中适用于我.

该功能似乎在Chrome 11中被打破,但我已经提交了一个错误:http://crbug.com/79716

Answer 3

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

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