CSS debugging tip: Add a border to every element

When debugging CSS issues, you might find it useful to add a black border to every element on the page:

* {
  border: 1px solid black;
}

This can surface many issues like:

• Bad alignment (e.g., an element should be horizontally / vertically centered but isn’t).
• Unintended overflow (e.g., an element overflows its parent container when it shouldn’t).
• Wrong dimensions (e.g., an element’s height / width is smaller or bigger than it should be).

TODO

It’ll be a fun exercise to create a Chrome extension that runs the below snippet:

const style = document.createElement('style');
style.innerHTML = '* { border: 1px solid black }';
document.head.appendChild(style);