/
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.
, multiple selections available,
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