20

CSS Tip for debugging positioning

almost 5 years ago from , Lead PHP Developer

Inject this CSS into your inspector tool.

* { 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); }

11 comments

  • Luis RomeroLuis Romero, almost 5 years ago

    Or, try pesticide

    5 points
  • Max StoiberMax Stoiber, almost 5 years ago (edited almost 5 years ago )

    I made a GitHub repository out of this snippet for even easier usage. You can now either put it into a link tag on your website

    <link href="https://rawgithub.com/mxstbr/debug.css/master/debug.css" media="all" rel="stylesheet" type="text/css" />

    or add it as a bookmarklet to your browser:

    javascript:(function(){var e=document.createElement("link");e.setAttribute("href","https://rawgithub.com/mxstbr/debug.css/master/debug.css");e.setAttribute("rel","stylesheet");e.setAttribute("type","text/css");e.setAttribute("media","all");document.head.appendChild(e)})();

    Thanks for the great tip! :-)

    P.S. I couldn't find your twitter/linkedin/facebook/... profiles Darren, so I linked to this post in the credits. Do you want me to link to something else?

    2 points
  • , almost 5 years ago (edited almost 5 years ago )

    I messed up the post and don't know how to edit. It's meant to be...

    * { 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); }
    2 points
  • Chris NagerChris Nager, almost 5 years ago (edited almost 5 years ago )

    simple-debug.css uses this one line of CSS to outline and show the depth of each element:

    *{outline:1px solid #fff!important;background-color:rgba(0,2,54,.1)!important}

    Chrome extension available.

    1 point
  • Patrick SchneiderPatrick Schneider, almost 5 years ago

    wow clever, this is pretty helpful!

    0 points
  • Tri NguyenTri Nguyen, almost 5 years ago

    Or just use the built-in 3D view mode in Firefox. FYI: https://www.youtube.com/watch?v=zqHV625EU3E

    0 points
  • Giulio MichelonGiulio Michelon, almost 5 years ago

    Hah, nice idea!

    0 points
  • , almost 5 years ago

    Sorry guys, can't get the post to format correctly.

    0 points