Preserve DOM element highlighting in chrome dev tools / firebug

Question

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!

Euphemie

Answer 1

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.

Lamentation

As a good citizen, you are always welcome to contribute to the DevTools! source.chromium.org/chromium/chromium/src/+/main:third_party/… – Lamentation

We are in 2023 now. Is this still impossible? – Salamis

Sadly, none of the previous authors have expressed desire to implement the feature. Perhaps try filing a feature request at crbug.com/new ? – Lamentation

2024 and still nothing - bummer! – Potage

@Potage I understand your frustration but since nobody has likely filed a request at the link above, this feature seems to be low priority even for users and is obviously under the ChromeDevTools team's radar. That said, StackOverflow may be a suboptimal forum for filing feature requests - please try crbug.com/new instead. – Lamentation

Answer 2

I know this isn't the exact answer you're looking for, but if you give the element a display of flex, and inspect the element, you can click the flex button, and it will highlight it in orange on the screen for you. Hopefully the actual feature is added soon! Hope this helps!

Catalepsy

Answer 3

This is now possible in Firefox using dev tools.

1. Open dev tools inspector (ctrl + shift + i)
2. Click on the element you want to keep highlighted
3. In the CSS rules tab on the right click on the small square next to element selector.

Additionally you can also highlight all elements that are using same CSS selector:

Ginnygino

Answer 4

there's another somewhat hacky method as of 2024. you can right click on the element in the "Elements" tabs and that will open the right click menu for that element. while the menu is open the element will remain highlighted and you can move your cursor and even scroll the page. if you click on something else though the menu will close and the highlight will go away.

Beetroot