Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I outline the elements of an HTML page in the browser to see the layout of the boxes? Modify the user agent style sheet?

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

like image 829
Purplejacket Avatar asked Dec 28 '16 04:12

Purplejacket


People also ask

How do I view a box in HTML?

Instead, you can right click the element you want to observe and select the Inspect button. This will display DevTools on the right side of the browser with the element selected in the Elements tab. To view the element's box, you can select the Computed tab.

What is outline-style in HTML?

An outline is a line that is drawn around elements, outside the borders, to make the element "stand out". The outline-style property specifies the style of an outline.

Which outline property is used to set the width of the outline?

The outline-width property is used to set the width of the outline. The outline-style property is used to set the line style for the outline. The outline-color property is used to set the color of the outline.


2 Answers

I use this way

*:hover { 
   outline:1px blue solid;
 } 
like image 200
Prasad Madushan Avatar answered Oct 08 '22 17:10

Prasad Madushan


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}
like image 23
Rajan471 Avatar answered Oct 08 '22 16:10

Rajan471