How to debug CSS with Firebug for an element that only appears when clicked?

Question

I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.

So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).

Any tips on how to get out of this catch-22?

Answer 1

What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.

Answer 2

Select your element in the HTML tab, directly in the source.

Then, you can hover your page to toggle it.

Answer 3

What about using Chrome and the Developer tools in it? If you click on the top right hand corner in chrome there is a developer tools tool that allows you to inspect css et cetera.

Answer 4

In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.

In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.

Answer 5

Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.

Read more in firebug documentation

Answer 6

In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.