Grow your CSS skills. Land your dream job.

Chrome Web Tools

  • # January 9, 2013 at 10:06 am

    Is there a tool for Google Chrome that allows developers to see where divs are etc…

    # January 9, 2013 at 10:15 am

    If you mean like outlining them on a page, then I’m not aware of anything like that.

    Most of us just use Chrome Developer Tools (F12) and view the source. When you ‘hover’ over the code it shows you where the element is and gives you the relevant information.

    # January 9, 2013 at 10:16 am

    You mean Developer Tools that’s built in?

    # January 9, 2013 at 8:40 pm

    [Cool bookmarklet I use...](http://westciv.com/xray/ “”) besides other dev tools

    # January 10, 2013 at 3:17 am

    If you’re developing a site and just want to outline everything, just add;

    * { outline: 1px solid red; }

    To your CSS. Job done.

    # January 10, 2013 at 2:24 pm

    What @andy_unleash mentioned is super useful tip for developing.

    Personally I use a different approach.

    * { background: rgba(0,0,0,0.1) !important; }

    Which provides a nice little subtle background which helps locate overlaps and is really good for troubleshooting margin/padding issues (also finding redundancies, refactoring others work).

    You can then modify the CSS depending on what you were working on, lets say you only wanted to find divs.

    div { background: rgba(0,0,0,0.1) !important; }

    And if you see really dark colors (overlapping bg colors), you may have a case of divitus.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".