Dev tools element inspector


Hope all is well

When hovering over an element in dev tools, the browser will show if the element has margin, padding, borders, etc. Can I trigger this with js, without dev tools

E.g. onhover = highlightStyles

If you’re talking about the 246.18 x 18.4, those are the dimensions, not padding. I don’t see any padding showing.

No I refer to the ‘orange part’. That’s the element margin. It’s only shown when I hover on the element in dev tools. I want to show these ‘extra styles’ that the browser shows when hovering over elements in dev tools, but through js

I don’t get it.

Where do you want to show the data in the dev tools?

The same thing that happens when hovering over an element in dev tools, which is: some of the element’s “invisible” styles are shown. I want these “invisible” styles to appear the same whey they do when hovering over the elements in dev tools, but without involving dev tools, just js.