When debugging HTML is there a way to listen for div width change using JavaScript or jQuery?

Question

When debugging HTML is there a way to listen for div width change using JavaScript or jQuery? I have a div changing size due to some CSS and can't figure out where, even stepping through. I was wondering if there was a way to hook an event up to a div to see what is causing it to change? Even if possible, I'm not sure how how would pass stack information for what caused the size change in the first place, so this may not even be possible.

Answer 1

I use Chrome, it seems to give the most details.

• Download Chrome
• Press f12
• goto first tab [Elements]
• click on the magnifying glass and go to your div
• right click on the highlighted html and select "Break on Subtree modifications"

Answer 2

This is bad way, but I'm not sure such event exists.

$(function(){
    var last = $("#your_div").width();
    setInterval(function(){
        if (last != $("#your_div").width()){
            alert('div width changed');
        }
    }, 100);
});

Answer 3

This guy explains how attach to the DOMAttrModified event to detect CSS changes.

Event detect when css property changed using Jquery

It's only supported in FF and Opera, but if its just for debugging it will do the trick.

http://www.quirksmode.org/dom/events/

Answer 4

Firebug for FireFox allows you to attach and break on CSS and attribute changes is this what you're looking for?