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

Sebastian Zartner · Answer 1 · 2016-07-11T17:39:15.630

13

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

edited Jul 11 '16 at 17:39

answered Feb 19 '14 at 12:13

Sebastian Zartner

18,808
10
90
132

Yes, and you can already try it out in [Firefox Nightly](https://nightly.mozilla.org/). – Sebastian Zartner Nov 18 '15 at 17:41
1

Released with Firefox 45. Just write the text into the search box, no special characters needed. – user Jul 11 '16 at 13:57
Thanks for the hint! I've updated my response accordingly. – Sebastian Zartner Jul 11 '16 at 17:39

score 11 · Accepted Answer · edited Apr 02 '14 at 22:14

11

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.

edited Apr 02 '14 at 22:14

Sebastian Zartner

18,808
10
90
132

answered Feb 19 '14 at 22:00

NoBugs

9,310
13
80
146

26

still relatively useless (about 100x more useless) compared to just a firebug style simple text search which can do all of those above (and many others - including finding text) within split seconds – pillarOfLight Feb 20 '14 at 15:41
1

CSS searching is what I would think most developers want - the only really annoying thing for me at least is that it doesn't seem to search within frames on the page. What version of Firefox do you have? It may be affected by https://bugzilla.mozilla.org/show_bug.cgi?id=881986 – NoBugs Feb 21 '14 at 02:11
3

Wow, I had no idea this was how the search box worked. Thank you! – aaronbauman Nov 06 '14 at 18:13
Thank you, now i can search by id : `[id*=id_of_the_element]` – inMILD Dec 03 '18 at 05:39

score 7 · Answer 3 · edited Jul 11 '16 at 15:50

7

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.

edited Jul 11 '16 at 15:50

林果皞

7,539
3
55
70

answered Jun 17 '15 at 23:19

x77686d

111
1
3

1

what keys to perform "find next" ? – 林果皞 Sep 20 '15 at 08:39
1

Ctrl+G to find next, Ctrl+Shift+G to find previous. @林果皞 – user Jul 11 '16 at 13:59
Yes, right-clicking the outermost element and doing "Edit As HTML" is the best workaround but it's insane that we need a workaround for this. You should just be able to use the search bar to search for text like you would in any other IDE or text editor – Samwise Ganges May 18 '23 at 22:34

score 3 · Answer 4 · answered Mar 30 '15 at 03:01

3

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

answered Mar 30 '15 at 03:01

Raffi

970
11
13

score 0 · Answer 5 · edited May 23 '17 at 11:53

0

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.

edited May 23 '17 at 11:53

Community

1
1

answered Nov 13 '15 at 13:05

Kenneth Stoddard

1,409
11
13

score 0 · Answer 6 · answered Jan 07 '16 at 16:20

0

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

answered Jan 07 '16 at 16:20

Kenneth Stoddard

1,409
11
13

3

if it is fixed would you mind telling us how to do a text search? – Owyn Mar 05 '16 at 20:42
Just use the search box, as you would search for a tag. No special characters needed. @Owyn – user Jul 11 '16 at 14:06
1

I have FF68, and if I type a text string that also happens to be an id or classname, it forces a search using the id or classname. I can't override it. For example, if I had
test_1 and searched for "test_1", it forces in "#test_1" and will only find the
.
– raphael75 Dec 02 '19 at 19:09

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

6 Answers6