Have ideas to improve npm?Join in the discussion! »

    css-debugger

    1.0.4 • Public • Published

    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.git

    Install Using npm

        npm install css-debugger

    Include File Using cdn.jsdelivr

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Sanusihassan/css-debugger/dist/css-debugger.min.css">

    Usage

        <body data-debug="*">
            ...
        </body>

    This will add outline: 1px solid #2d3436 to every single element inside the body element.

    debugging

    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>

    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.

        <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>

    Customizing the outline

    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;
        }

    Conclusion

    Don't Forget to Disable this on Production.

    Ask me any questions at any time.

    Install

    npm i css-debugger

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    92.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar