/
CSS Borders - Useful for debugging

CSS Borders - Useful for debugging

This is a powerful debugging tool for visualizing how CSS rules are being interpreted:

/* *{border: 1px black solid;} */

It’s analogous to using tracing rather than debuggers in C. It’s a much less fiddly way to quickly see all the borders in CSS layout - compared to inspecting elements in the browser one by one.

Have a DEBUG.css file which allows one to comment or uncomment this out.

One can use a Javascript function to call from the console to recursively display the borders.

Related content

Border box sizing model
Border box sizing model
More like this
Do no use CSS Anti-aliasing of fonts on the fly
Do no use CSS Anti-aliasing of fonts on the fly
Read with this
How can we make a CSS debug tool
How can we make a CSS debug tool
More like this
Make a CSS sandbox!
Make a CSS sandbox!
Read with this
How do we make a Javascript sandbox
How do we make a Javascript sandbox
More like this
CSS Colors
CSS Colors
Read with this