Debugging of CSS margins and other invisibles

Can you make DOM/style inspector show CSS margins? And ideally also react to clicking margins? For brilliant example see XyleScope for WebKit.

I'd also appreciate information when Opera decides to (un)collapse margins, with which object and why.

This is precious information that can solve some serious "WTF!?" moments.

Another nice thing would be to draw outline or semi-transparent background on objects that may react to clicks, but are invisible. Again, when layout breaks or clicks don't seem to work, usually such objects are to blame.

+1

firebug has this feature, where you hover over an element in the DOM view and the element's marging and padding are displayed as a semi-transparent box over the element on the page.

+1 from me, too.
Helps to see the margins and paddings on the actual page as an outline.
They show up for a few seconds when you click on a dom element in dragonfly, but that just doesn't cut it

+1 from me. Firebug's method of two colours of semi-transparent overlay, showing padding and margin, is very powerful to debug layout problems. Would be neat to find a way to display negative margins too, Firebug doesn't get these right (yet).