How to display a red outline on a WebPage

How to display a red outline on a WebPage

As a FrontEnd Developer, I often need to see the “blocks” on a WebPage. A simple red outline on all boxes is very helpful for:

• getting the Big Picture of the WebPage layout
• Debugging

There are a few ways to do this:

• using plain JavaScript
• using CSS

Using plain JavaScript

Run this script in the browser console:

document.querySelectorAll('*').forEach(el => {
    el.style.outline = '1px solid red';
});

Using CSS

* {
  outline: 1px solid red !important;
}

or:

* {
  border: 1px solid red !important;
}

Result: