This is a small file that can help you to debug your css in a wireframe style.
git clone https://github.com/Sanusihassan/css-debugger.git npm install css-debugger <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Sanusihassan/css-debugger/dist/css-debugger.min.css"> <body data-debug="*">
...
</body>This will add outline: 1px solid #2d3436 to every single element inside the body element.
This will add the outline only to the direct childrens of the section.
<section data-debug="each">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</section>This will add the outline to the section itself and not it's children.
<section data-debug="self">
...
</section>This will turn off the debugging on the section but not on it's children.
<body data-debug="*">
<section data-debug-self="off">
<div>item 1</div>
<div>item 2</div>
...
</section>
...
</body>This will turn off the debugging on each direct children of the section but not the sub childrens.
<body data-debug="*">
<section data-debug-each="off">
<div>item 1</div>
<div>item 2</div>
...
</section>
...
</body>This will turn off the debugging on every single child inside the section including sub childrens.
<body data-debug="*">
<section data-debug-all="off">
<div>item 1</div>
<div>item 2</div>
...
</section>
...
</body>If you want to change the outline color for example, use the --debug vaiable.
It is defined as follows:
:root {
/* change color or size by modifing this variable */
--deubg: 1px solid #2d3436;
}Don't Forget to Disable this on Production.
Ask me any questions at any time.