Firebug: How can I inspect an element I can't click on?

Question

I'm trying to use Firebug to inspect a page element that appears when I hover over a photo.

Problem is, the element's position is dynamically offset from the mouse position, so it's impossible for me to right-click on it to get the "Inspect Element" option.

I had hoped that the onhover element would be inserted into the DOM in a sensible place, but so far, I haven't been able to find it.

Any suggestions?

Note: I don't know the element's ID, class, etc -- that's what I'm trying to find out. — jawns317, Jun 28 '11 at 17:53

score 3 · Answer 1 · answered Jun 25 '12 at 19:24

3

If you know where in the DOM the new element will be created (quite often those elements are created as children of the body element) you can set up a breakpoint for when it is created.

Let's assume that the element will be created as a child of the body element. You will be able to inspect the element if you follow these steps:

Load the page
activate FireBug's HTML panel
Locate the body element
Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
Go hover over your photo to trigger the wanted element's creation

Script execution should then break as soon as the element is created. At that point you will have all the time you need to inspect that dynamically created element, even in the HTML panel.

answered Jun 25 '12 at 19:24

Werner

3,523
1
22
21

Wow, this is ingenious, thanks. I just checked and it seems Chrome has this functionality too. This will come in very handy indeed. :) – user280109 Jan 29 '14 at 11:57
BTW this solution is great, but the page im trying to examine has many hundreds of mutations on the body element, and the event im looking to trap is hard to predict when its going to happen, what i would really like is a way to freeze the dom with a keyboard shortcut or bookmarklet when the element pops up, so i could then inspect the frozen transitory popup element. the element i want to examine pops up at random. – user280109 Jan 29 '14 at 12:37

score 1 · Accepted Answer · answered Jun 28 '11 at 17:57

1

This isn't an ideal solution, but you could investigate the onhover code to find out more information about the element that's being created. That info might allow you to find it in Firebug's DOM viewer.

answered Jun 28 '11 at 17:57

mwcz

8,949
10
42
63

1

I ended up just poring over the code in the DOM viewer to find the out-of-reach element, but I'll use this suggestion in the future. – jawns317 Jun 28 '11 at 18:12

score 0 · Answer 3 · answered Jun 28 '11 at 17:50

0

Can you search for the element using the search bar at the top of the firebug window?

answered Jun 28 '11 at 17:50

Eddie

919
2
9
21

score -1 · Answer 4 · answered Jun 28 '11 at 17:50

-1

You can use CTRL+F to find it in the code view.

answered Jun 28 '11 at 17:50

citizen conn

15,300
3
58
80

Firebug: How can I inspect an element I can't click on?

4 Answers4