1

When debigging css, what do you usually use?

over 5 years ago from , Front-end developer

Over a last couple of years i saw a lot of techniques and i'm curious what do you guys use? Do you use any special tools except browser inspectors? For example, when debugging position, i prefer to use outline over border property.

3 comments

  • Gajus Kuizinas, over 5 years ago
    * { background-color: rgba(255,0,0,.2); } * * { background-color: rgba(0,255,0,.2); } * * * { background-color: rgba(0,0,255,.2); } * * * * { background-color: rgba(255,0,255,.2); } * * * * * { background-color: rgba(0,255,255,.2); } * * * * * * { background-color: rgba(255,255,0,.2); }

    This is one of my favourite inventions.

    But what does this horrible thing do?

    It is meant to be used when you are working with layout, e.g. take http://time.com.

    Imgur

    The problem is that unless the element on the page has a solid background or it is a picture, you do not see how does it fit into the layout, e.g. most of the text nodes, pictures with transparency, etc.

    With the above CSS, you will see something along the lines of:

    Imgur

    Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies.

    I have originally shared this answer on Quora, http://qr.ae/RFqsD6.

    3 points
    • , over 5 years ago

      This is nice, i'm using a little different approach. Most of time, i'm using "outline: 1px solid color;" , i find it a little easier to track elements. And don't use it on all elments, only on selected element and few his parents.

      Do you use any of grunt, gulp or browser plugins?

      0 points
      • Gajus Kuizinas, over 5 years ago

        No. I usually just have a "debug" class that assigns this style to all the descendants and then just add debug class to the element that I want to test, be it body or some arbitrary element down the DOM tree.

        0 points