Reputation: 5264
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
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
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
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
Reputation: 3902
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
Upvotes: 1
Reputation: 8846
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
Upvotes: 0