How to do a simple search in Firefox DevTools' Inspector tab?

Question

I'm using the Firefox DevTools and I'm using the Inspector tab, in which it displays the HTML tree.

When I use the Search HTML feature, it only searches tags. So suppose I have this:

<div class="lol">textinsidediv</div>

And when I search for 'div', it returns the <div> accordingly. However, if I search for 'textinside' it doesn't match the text inside the content despite the fact that it's starting right there.

My question: How can I search for any arbitrary string within this HTML tree?

(In contrary Firebug performs a simple text search just as expected.)

Answer 1

It is not some really useless html tag search, it actually searches CSS selectors (same as what you use with css, querySelector in Javascript, or jQuery selector)

So you can search #id, go through all elements of a certain class by searching .class, you can even search for all elements with attribute including text, for example [class*="o"] should give all elements with letter o in class attribute. This is helpful for what designers/developers want to find - to find text, you can Ctrl+F within the page, then right click, inspect element.

Answer 2

The search in the Inspector panel of the Firefox DevTools allows to search for text content since Firefox 45 (see bug 835896).

Btw. since Firebug 2.0 you're also able to search in the HTML panel using CSS selectors (additionally to the plain text search).

Answer 3

A good idea is to Copy Inner HTML but even better is Edit As HTML. That brings up an in-place panel displaying the full text, and it can be searched with Ctrl+F or cmd+F.

Ctrl+G to find next, Ctrl+Shift+G to find previous.

Answer 4

Workaround: in the inspector, right-click the outermost tag, then click 'Copy Inner HTML'. Paste in a word processor and search there.

Answer 5

This is now fixed as of FireFox 45...

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching

Answer 6

See answer.

As an alternative to searching within dev tools...

• Right click on the page anywhere
• Select View Source

Within the source view you can easily perform a text search by doing a ctrl/f or cmd/f if on a mac.