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

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?

dom
google-chrome
google-chrome-devtools

80464 次浏览

小开

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

小开

最佳答案

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

ex: $x("//img")

小开

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

小开

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.