How to search DOM elements using XPath or CSS selectors in Chrome Developer Tools?

Question

The doc http://code.google.com/chrome/devtools/docs/elements.html says it supports XPath or CSS selectors, but when I tried, didn't seem to work for me.

Any one knows how to use it?

Answer 1

You can use $x in the Chrome javascript console. No extensions needed.

ex: $x("//img")

Answer 2

Just typing xpath expression in the search box should work. It works for me in tip-of-tree build.

The feature seems to be broken in Chrome 11 though, I've filed a bug on this: http://crbug.com/79716

Answer 3

For xpath searches use $x('xpathSelector'). For a css selector use $('cssSelector').

However, this last selector returns only the first matching element. If you want to see all matching elements go for $$('cssSelector')