A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
elem.clientLeft
, elem.clientTop
, elem.clientWidth
, elem.clientHeight
elem.getClientRects()
, elem.getBoundingClientRect()
This document has been modified from its [original format][m1], which was written by Ning Shang ([email protected]). It has been updated and reformatted into a [Markdown][m2] document by [Woody Gilk][m3] and [republished][m4].
When working with a remote git repository which is hosted on a third-party storage server, data confidentiality sometimes becomes