treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Chrome Web Tools

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

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

  • You mean Developer Tools that's built in?

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

      * { outline: 1px solid red; }
    

    To your CSS. Job done.

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