Searching for HTML elements in Chrome DevTools

Question

On this website, there's a div with the attribute class="item". When I clicked F12 to bring up the Developer Tools. I pressed Ctrl + F and typed in class="item" and no results came back. I also tried Ctrl + Shift + F but nothing returned. Here is a screenshot:

Even if I search for class=, only text within HTML comments are found.

Hershelhershell

Answer 1

I searched for the XPath of the element instead and it worked:

//*[@class="item"]

Hershelhershell

XPath is hard. It is essentially a programming language. It is not suitable for routine needs like "this particular image fails to lazyload, I must find it by a string present in one of its attributes, but I don't know which one exactly because this is what I am yet to debug". – Folliculin

Answer 2

Late answer but pretty sure .item would've worked.

Liftoff

Answer 3

Search bar only supports string, CSS selectors or XPath selectors.

I recommend you use CSS selectors: [class="item"]

Philender

It supports strings, but they are searched in all known files, not in the actual HTML! I asked a programming AI bot about this, and it gave me a series of incorrect instructions. I just want to do a string search in the HTML that the browser is visiting. – Tracytrade

Answer 4

Just use CSS selectors. Just .item would work here.

If you need some particular element with a specific class name, just do div.item.

Custom attributes work, too: a[aria-label="Test Text"].

Havard

Answer 5

This seems like it might be a bug. You can report it on http://crbug.com.

If you were to search for 'item' you should be able to find the elements that have the class item on them.

Bunin

Answer 6

Dayuloli's fix is a good one, you can also just search for "item" although that won't work if there are multiple classes on that element.

Sumption