domfirebugselectiongoogle-chrome-devtools

Preserve DOM element highlighting in chrome dev tools / firebug


Is there a way to preserve the highlight showing the boxmodel properties (width, margin, padding, border) of a DOM element? I'm trying to inspect the behaviour of an element when the window is resized so it would be nice to permanently see the measurements.

Solutions for both Chrome Developer Tools and Firebug (Firefox) appreciated!


Solution

  • This is not possible for Chrome DevTools, but you can open the Metrics pane in the right-hand side of the Elements panel to monitor content area/padding/border/margin when the window is resized.