CODEWITHSUNDEEP
htmlcss-selectorsgoogle-chrome-devtoolsfirefox-developer-tools
Mike B
Mike B

Reputation: 731

How to search for only HTML elements using browser web dev tools?

I want the browser dev tools source code search to find every HTML element of a certain type on the page, let's say <form>. I think the CSS selector for that is simply form, yet in DevTools search, form also returns every string containing "form" (e.g. "format"). How do I search for elements only?

Edit: To clarify, searching by IDs (#<id>), classes (.<class>), etc works fine. But I just want to search by element type.

Edit 2: Wow, I though dev tool search was supposed to ONLY search by CSS selector, but it's always doing both CSS & text search. E.g., I thought searching by .myclass would only find elements with the class myclass, but it also finds the text ".myclass". Lesson learned.

Upvotes: 0

Views: 6368

Answers (3)

BoltClock
BoltClock

Reputation: 723598

There isn't any reliable way to guarantee that you only find elements, and not strings containing your search term, in any browser.

<form is going to find you any elements in the HTML source matching that:

  • start tag beginning with <form
  • and the string "<form" in page content

The XPath expression //form, likewise, is going to find you both elements matching that in the HTML source:

  • (X)HTML elements (tags) named form for this XPath
  • and the string "//form" in page content

Firefox

For Firefox the MDN documentation of Firefox Developer Tools explains 3 search-options in Examine and edit HTML, section "Searching":

There are three types of searches that are performed automatically depending on what you enter, a full text search, a CSS selector search, and an XPath search.

In your case this could be for example following CSS selectors:

  • * form
  • * > form
  • :root form
  • form:not(_)
  • form:nth-child(n)

But these all suffer from the same weakness as the two above in other browsers. The only way to work around this is to narrow down your search as much as possible to reduce the chances of matching page content.

Upvotes: 4

esqew
esqew

Reputation: 44700

Chrome Dev Tools supports finding elements by XPath, so you can use the search term //form to find all instances of the form tag in the loaded document, regardless of parent elements.

Firefox doesn't seem to have any convenience features like that. You'll have to find it using the Javascript command line function like so: $("form").

Upvotes: 2

Chris Happy
Chris Happy

Reputation: 7295

Search for "<form"

Assuming you're talking about the "Elements" tab of GC's developer tools

Upvotes: 2

Related Questions