Search DOM Nodes With Opera Dragonfly Developer Tool

During a workshop at SudWeb Conference, Anthony Ricaud (Mozilla) and I decided to run a session on Web developer tools to identify the frustrations and the desired features for Web developer tools such as Opera Dragonfly.

Boris Schapira expressed that it was hard to have a useful search when inspecting the DOM. He didn't know about the search feature in Opera Dragonfly.

When you "Inspect Element", you get the usual Dragonfly window, then on the right side, there is a search tab ("Rechercher" in my French UI. Yes it is even multilingual!).

Let say, I want to search for all elements containing the class attribute with articlelist value. Simple. I select CSS, then I enter the CSS selector expression .articlelist. As we can see below, it displays two nodes.

I would like to have a more detailed list of nodes. I create a CSS selector expression with .articlelist li to get all the li children elements of .articlelist (as you would do to target it in a stylesheet).

The list is more complete. Finally, when clicking on the list of matching nodes on the right side, Dragonfly displays:

<ul class="bullets"><li>The matched DOM node on the left</li><li>the matched node box in the viewport</li></ul>

Pretty useful!

Oh and… in the search form, you may use: plain text, CSS selectors, Regex, XPath expressions. Enjoy!