CODEWITHSUNDEEP
domhoverfirebugmouseoverinspect
jawns317
jawns317

Reputation: 1746

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

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?

Upvotes: 2

Views: 3340

Answers (4)

Werner
Werner

Reputation: 3663

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:

  1. Load the page
  2. activate FireBug's HTML panel
  3. Locate the body element
  4. Right-click on the body element and choose Break on Child Addition or Removal from the popup menu
  5. 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.

Upvotes: 3

mwcz
mwcz

Reputation: 9331

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.

Upvotes: 1

Eddie
Eddie

Reputation: 939

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

Upvotes: 0

citizen conn
citizen conn

Reputation: 15390

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

Upvotes: -1

Related Questions