CODEWITHSUNDEEP
cssfirebug
rodbv
rodbv

Reputation: 5264

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

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?

Upvotes: 7

Views: 2701

Answers (5)

stack
stack

Reputation: 638

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.

Upvotes: 0

Jan Dudulski
Jan Dudulski

Reputation: 843

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

Upvotes: 4

KP.
KP.

Reputation: 13720

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.

Upvotes: 1

Benoît Vidis
Benoît Vidis

Reputation: 3902

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

Then, you can hover your page to toggle it.

Upvotes: 1

Petr Peller
Petr Peller

Reputation: 8846

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

Upvotes: 0

Related Questions