What Is This?
This is a small file that can help you to debug your css in a wireframe style.
Clone The Repo
git clone https://github.com/Sanusihassan/css-debugger.gitInstall Using npm
npm install css-debuggerInclude File Using cdn.jsdelivr
Usage
... 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.
item 1 item 2 item 3 This will add the outline to the section itself and not it's children.
... How To Turn Off The Debugging On A Specific Area?
This will turn off the debugging on the section but not on it's children.
item 1 item 2 ... ... This will turn off the debugging on each direct children of the section but not the sub childrens.
item 1 item 2 ... ... This will turn off the debugging on every single child inside the section including sub childrens.
item 1 item 2 ... ... Customizing the outline
If you want to change the outline color for example, use the --debug vaiable.
It is defined as follows:
Conclusion
Don't Forget to Disable this on Production.
Ask me any questions at any time.