Geek Answers Handbook

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

I want to debug CSS for a DHTML menu, but the item I want to debug is a submenu, so it only appears when you click on the top item in the menu.

Therefore, I can’t use this button in Firebug, which shows CSS for the next click of the element, because when I click on the top menu element, it will show CSS for this element, not its child, and if I parse it first and then press the Firebug button, the submenu will disappear (it disappears when it loses focus).

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

+7
css firebug
source share
5 answers

Use the firebug console command line to fire the click event. Like $('#menutab a').click(); If necessary, you can also set a breakpoint to avoid hedging.

More details in firebug documentation

+4
source share

Select your item in the HTML tab directly in the source.

Then you can hover your page to switch it.

+1
source share

In such cases, I sometimes modify the script a bit so that the "hidden" element remains visible.

In this case, I would probably comment / disable the script code that hides the blur element. Thus, you can click on the main element and check the visible element as long as necessary.

+1
source share

How about debugging with all visible buttons? Or you can still find the element in the HTML tree.

0
source share

In Opera, you can use Dragonfly (Tools> Advanced> Developer Tools or Ctrl + Shift + i) to solve this problem. When the tools are active, clicking on any part of the page will move around this section of HTML next to its CSS.

0
source share

More articles:


All Articles