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?

score 285 · Accepted Answer · answered Aug 29 '11 at 20:49

285

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

ex: $x("//img")

answered Aug 29 '11 at 20:49

Matt Polito

9,588
2
19
13

29

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.document.body; #to xpath query that iframe for table cells: $x("//td",myframe); – Adolph Trudeau May 18 '12 at 13:34
12

to find an element with a CSS selector a one should use $$ console function, e.g. $$('body') – d.k Dec 02 '13 at 18:06
3

More commands can be found here: https://developers.google.com/chrome-developer-tools/docs/commandline-api#selector – Dmitry Polushkin Dec 16 '13 at 00:54
coming back to this question after almost 2 years, yeah this one is nicer. – Bobo Jan 29 '14 at 15:43
Very good for debugging XPaths! By the way, the `$x()` function works in the Safari command line API, too. – Otto G Apr 20 '18 at 11:27
Excellent! I was looking for a way to do it in the elements pane, but this is much easier – Steven Jun 26 '18 at 17:32
Works with [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers) as well – But those new buttons though.. May 23 '19 at 22:53
@billynoah It's a common pattern now, should work in most browsers' dev tools. – Matt Polito Feb 06 '20 at 16:13

score 15 · Answer 2 · edited Mar 11 '13 at 09:58

15

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

edited Mar 11 '13 at 09:58

Matt

74,352
26
153
180

answered Apr 18 '11 at 07:03

Yury Semikhatsky

2,144
13
12

you are right. it is working but the highlighting feature is broken. I'm using chrome 10.0.* on Mac os X. – Bobo Apr 19 '11 at 14:07
better answer by Mark Polito below. – FGM Oct 02 '13 at 07:59
It works with Chrome 32. Go to Element tab of the devtool and press CTRL+S and search for the xpath – eeezyy Feb 20 '14 at 02:00
@eeezyy you mean ctrl + f ? – Box Jan 05 '17 at 17:22

score 8 · Answer 3 · answered Oct 13 '19 at 22:19

8

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

answered Oct 13 '19 at 22:19

cham

8,666
9
48
69

score 2 · Answer 4 · answered Jul 12 '21 at 18:56

2

If you click on any element in the elements pane then type command-F, it will open a search bar that lets you search for elements using xpath selectors.

answered Jul 12 '21 at 18:56

spacether

2,136
1
21
28

Or Ctrl-F on Windows – Zar Shardan Mar 22 '23 at 18:32

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

4 Answers4

Linked