Search code examples
javascriptdebuggingfirebug

How to inspect dynamic on-hover elements of the webpage in Firebug?


I have a webpage where photo previews are displayed when you hover the mouse over certain icons. I want to inspect these preview divs in Firebug, but the problem is that you cannot reach it with the mouse, since the preview will disappear when you move the mouse off the icon!

Is there any solution to this problem?

One possible solution would be to stop the JavaScript by some keyboard shortcut. It must not require to move the mouse cursor, because then the preview would disappear. But looking at answers in "Is it possible to stop a javascript with Firebug without using breakpoints?" it doesn't seem to be possible...

Also note that the element is not hidden anywhere when unseen, it is created on-hover and then removed.


Solution

  • In a case like this: http://www.starplugins.com/cloudzoom a quick solution that works with Firefox/Chrome Developer Tools and firebug is the following:

    1. have the developer tools opened
    2. scroll your page to a position where the element that has the hover effect is a bit covered by the developer tools pane.
    3. this way, when you "mouse-out" of the element and "mouse-in" to the developer tools pane the hover effect is still in action.

    It's not the best solution but it might help :)

    Update: (it covers this case and works with Chrome):

    1. have the developer tools opened
    2. right-click on the element you want to examine but don't click "inspect element" or anything else
    3. the pop-up will freeze so you will be able at least to find it in the already opened inspector