My current job is to work on the project website of the Eclipse Modeling Team Framework. We had an issue that the banner image with the logo wasn’t shown and we didn’t now why.

MTF site without logo and banner

Heiko Behrens pointed out to use an inspector. Since I’m using *the best browser ever* aka Opera So I was looking for such a tool following that tech support cheet sheet:

Howto find a function in your program

It didn’t take long to find that highly suspicious entry in the menu:

Invoke Opera Dragonfly

Once started, Opera switches the Website into a debug mode and displays the Dragonfly view area. Dragonfly shows the structure of the viewed website and allows to select elements from its DOM tree or within the browser view:

Opera Dragonfly inspector

In the above screenshot I selected the element div id="novaContent" in the DOM structure of Dragonfly on the bottom left. In the website this is the area below the menu with the searchbar.
The bottom right side of Dragonfly shows the styles that are valid for the selected element. It reveals that the background image has a wrong path. If you click on that entry you can edit that value to directly test a different path. The change is reflected in the browser immediately!

Live editing with Opera Dragonfly

Sure you can do this with Firefox probably, too. But you’d need to know if there’s a plugin for this and install it. Hence, it’s always astonishing how much you can get out of the box with the Opera browser.