Question

There is an HTML object that changes after mouseover. I need to inspect the changes and copy it's code, but with firebug I cannot do that (the mouse can be only in one place).

Is it possible to freeze the html while the mouse is on an object and then check the changes in firebug?

Note that, it is not the HTML attribute that changes, it is the content that changes. Another div is added after mouseover. So, it cannot be monitored by Style tab. For example in this link: http://demo.virtuemart.net/index.php/2012-01-13-09-33-20/product-details-layout what happens when mouse is over the product image?

No correct solution

OTHER TIPS

actually i dont have firebug .. but chrome inspector can work for you.. i hope it should be available in firebug also.. check the image

Check Image

so you can try this one also..

You can stop the script execution when the HTML is changed using the Break On Child Addition or Removal option inside the context menu of the HTML panel.

To use this option you need to enable the Script panel first and reload the page.

Example:

At the page you mentioned just right-click on the <body> tag and choose the Break On Child Addition or Removal option. Then hover the product image. Doing so the script execution will stop and you'll be able to inspect the HTML for the loupe by clicking on the node inside the break notification:

enter image description here

If you are using Chrome you can press F8 while having the developer tools opened. F8 pauses on next script execution. So if you hover, then press F8, then move your mouse a bit inside the element, you will be able to rightclick -> inspect it.

In Firebug Addon you can make the state permanent with the dropdown-menu at the Style tab.

Hover state in Firefox Firebug
http://i.imgur.com/pUaWw6b.png

If you want to change the content of an element, you can by editing the HTML directly.

Edit HTML
http://i.imgur.com/AbW0z9D.png

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top