How can we make a CSS debug tool

Why is this useful? Well if we are going to make our websites and applications simpler we need to have good visibility on our legacy. This approach is extremely effective in quickly visualizing grid layouts which a very simple way to managing positioning in modern browsers. See laying out a page with grid.

This works quite well to visualize the position rules on a webpage even if is not your own website:

function DEBUGborders(){
   console.log("Borders on");
   var Element = document.createElement('style');
   document.head.appendChild(Element);
   var Sheet = Element.sheet;
   Sheet.insertRule("*{outline: 1px red solid;}", 0);
} DEBUGborders()

Copy pasting that code into the console of your browser will give you red outlines of the borders of every CSS object in your browser.

For kicks I have attached a screen shot of what happens to this page when you apply this trick:

Concepts

How can we make a CSS debug tool

Related content