12

In the Chrome devtools, Firefox devtools, Safari, Opera, etc., if I inspect an element I can see its bounding box nicely outlined when I mouse over the code for that element in the source panel. That's great. But what if I'd like to see how all (or most of) the elements on the page are laid out? For instance, maybe I'd like to see something like this:

enter image description here

In the Firefox "Style Editor" I've added these styles:

div { border: 1px dotted pink }
p   { border: 1px solid green }
a   { border: 2px solid yellow }
li  { border: 1px dashed cyan }
img { border: 1px solid purple}

(Chrome can't do this since it doesn't support the UAAG 2.0 web standard for accessibility). Since the user agent style sheet overrides the styles from the page, I see the kind of outlines I'm looking for.

Now this is just a hack, and perhaps is sufficient, but are there other tools that do this, or something in the devtools that I didn't find?

Note: I did find this answer regarding the "Show composited layer borders" under the Rendering menu option in Chrome, but it's not really what I'm looking for:

https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools

Community
  • 1
  • 1
Purplejacket
  • 1,808
  • 2
  • 25
  • 43

5 Answers5

13

I use this way

*:hover { 
   outline:1px blue solid;
 }
Vova
  • 750
  • 11
  • 26
Prasad Madushan
  • 131
  • 1
  • 6
  • Wow! That's cool and super simple! E.g., in chrome I just click the plus icon in the top right corner of the styles panel right here on this very page, add that style rule, and I can move the mouse around to see an outline of every little element. Superb! – Purplejacket Sep 02 '20 at 18:12
  • Adding style rules with Firefox is almost identical, pressing the plus symbol in the "Rules view" -- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS – Purplejacket Sep 02 '20 at 18:23
  • A supplemental idea: It sometimes helps to also add a *:nth-child(2n) selector using a different outline colour. The result is that the outlines alternate between the two colours as you descend down the tree. This can makes it easier to distinguish between different elements, and makes sibling vs parent-child relationships clearer. (Credit _Peppertop Comics_ of YouTube.) – Purplejacket Jun 29 '22 at 21:50
6

You dont have to edit User agent style sheet as you can do it using developer tools [F12].

You need to add this code

*{border: 1px solid #fff}
Rajan471
  • 338
  • 4
  • 16
  • That looks like what I did, except one style rule instead of the five I had. Where in developer tools do you add this? Under "Style Editor" like I did for Firefox? And can this be done in Chrome as well? – Purplejacket Dec 29 '16 at 05:39
  • Works just fine, thank you! P.S. But unfortunately, not exposes/reveals _background_ images/elements boundaries, is it possible? Mozilla Firefox 52.5.3 – jpka Oct 09 '18 at 19:36
4

It turns out I was looking for a browser extension a friend had mentioned a long time ago: the "Web Developer" extension.

http://chrispederick.com/work/web-developer/

Here's what it looks like outlining the block level elements:

enter image description here

It's available for Chrome, Firefox, and Opera. Apparently not for Safari.

Purplejacket
  • 1,808
  • 2
  • 25
  • 43
  • 1
    One more that does just that and lighter: [Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh) – Shiyaz Nov 27 '17 at 11:18
  • There's also a _Pesticide CSS_ that should work with Firefox: https://github.com/mrmrs/pesticide – Purplejacket Dec 14 '17 at 00:13
  • Ah, there is a Firefox _Pesticide_ addon (though not compatible with Firefox Quantum as of this writing). https://addons.mozilla.org/en-US/firefox/addon/pesticide/ – Purplejacket Dec 14 '17 at 00:18
  • Another one I just learned of: **tachyons-x-ray** https://chrome.google.com/webstore/detail/tachyons-x-ray/lbepbkiknibiobnbanhggglkmpkbdiim – Purplejacket Feb 23 '21 at 23:14
4

Another useful concept came up this year, 2022:

* {
  background: rgb(0 100 0 / 0.1) !important;
}

The idea is that every element gets a certain amount of coloring so that we can visually determine how much overlapping space there is because multiple overlaps will become darker. It will look like this:

'Card 1' has too much space on the right side

The technique reveals that there is excess space on the right hand side of the card 1 h2 tag.

The above image was authored by Kevin Powell on his codepen.

He describes the whole concept in a very cogent YouTube video called The console.log of CSS which is under a minute long.

Purplejacket
  • 1,808
  • 2
  • 25
  • 43
2

If you are using Firefox Quantum:

https://addons.mozilla.org/en-US/firefox/addon/open-pesticide/?src=search

Open Pesticide by MatthewBaa

Outlines each element on the page to help you visualize their dimensions and overcome those annoying CSS layout issues. Requires zero permissions and completely open source.

davimdantas
  • 123
  • 1
  • 8