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

Tags: css,firebug

Problem :

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?

Solution :

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

    CSS Howto..

    How to override the computed style in css?

    jQuery hover/hide/show - not all the text will disappear correctly when mousing over multiple images

    how to apply css to a particular table?

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How do I make a play button for my full page video?

    How to make margin collapsing work with input type=button/submit?

    How can I improve my webpage code to be scalable for smaller sizes?

    How Can I Make The HTML Page More Narrow?

    How to write css rule that run with a special browser?

    how to div.width css property using js or jquery?

    How to get full height of webpage with CSS?

    How to hide a div off the viewport responsively, and always showing the bottom 50px?

    How to convert px from photoshop to css

    How can I convert an svg-glyph into a path?

    How to draw two non-concentric circles in CSS with numbers inside it?

    How to customize qTip2 css?

    How to override css img properties?

    How to force a div to honor its constraints and put things into overflow instead of resizing a column?

    How to have choices that change the background of a site

    How to add border between td's in which are in different tr's?

    show loading div with overlay on submit while waiting

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to show ellipsis for long cell values in kendo ui grid?

    How is percentage calculated when using it for margin and padding?

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    How would I call :parent for this tooltip?

    How to style placeholder text color for individual text field?

    CSS how to height step arrow

    How to separate Text and HTML with CSS

    How can I apply a CSS class to an element with a given id, without modifying the element?