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?

Solution 1

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

ex: $x("//img")

Solution 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

Solution 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')

Comments

[Bobo]

you are right. it is working but the highlighting feature is broken. I'm using chrome 10.0.* on Mac os X.

[Adolph Trudeau]

This is a helpful answer. To add to it, the $x function accepts a second optional argument, context. $x(xpath, context) This allows you to select a particular iframe content, for example, and run an xpath query against it. So for the first iframe: myframe = document.getElementsByTagName("iframe")[0].contentWindow.doc‌​ument.body; #to xpath query that iframe for table cells: $x("//td",myframe);

[user3399101]

better answer by Mark Polito below.

[Dmitry Koroliov]

to find an element with a CSS selector a one should use $$ console function, e.g. $$('body')

[Dmitry Polushkin]

More commands can be found here: developers.google.com/chrome-developer-tools/docs/…

[Bobo]

coming back to this question after almost 2 years, yeah this one is nicer.

[eeezyy]

It works with Chrome 32. Go to Element tab of the devtool and press CTRL+S and search for the xpath

[Box]

@eeezyy you mean ctrl + f ?

[Otto G]

Very good for debugging XPaths! By the way, the $x() function works in the Safari command line API, too.

[Steven]

Excellent! I was looking for a way to do it in the elements pane, but this is much easier

[Eaten by a Grue]

Works with Firefox Developer Tools as well

[Matt Polito]

@billynoah It's a common pattern now, should work in most browsers' dev tools.