Create different depth of nodes with different colors, allowing you to see the size of each element on the page, their margin and their padding so you can easily identify inconsistencies.

README.md

CSS Layout Debugging

 
Create different depth of nodes with different colors, allowing you to see the size of each element on the
page, their margin and their padding so you can easily identify inconsistencies.
 

Documentation is coming soon ... Check back later!

Copyright © 2019 Bruce Bentley. Code released under the MIT License.

_debug.scss

@charset 'UTF-8';

///
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
///
/// CSS LAYOUT DEBUGGER
///
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
///
/// @description Create different depth of nodes with different colors, allowing
///              you to see the size of each element on the page, their margin
///              and their padding so you can easily identify inconsistencies.
/// @author Bruce Bentley
/// @link https://brucebentley.io/
/// @access public
/// @group utilities
///

:root {
    --level1-bg: rgba(255, 0, 0, 0.2);
    --level2-bg: rgba(0, 255, 0, 0.2);
    --level3-bg: rgba(0, 0, 255, 0.2);
    --level4-bg: rgba(255, 0, 255, 0.2);
    --level5-bg: rgba(0, 255, 255, 0.2);
    --level6-bg: rgba(255, 255, 0, 0.2);
    --level7-bg: rgba(255, 0, 0, 0.2);
    --level8-bg: rgba(0, 255, 0, 0.2);
    --level9-bg: rgba(0, 0, 255, 0.2);
    --outline: 0.25rem solid;
    --outline-bg: rgba(102, 51, 153, 0.25);
}

@mixin debugger() {
    * { background-color: var(--level1-bg) !important; box-shadow: none; filter: none; outline: var(--outline) var(--outline-bg); }
    * * { background-color: var(--level2-bg) !important; }
    * * * { background-color: var(--level3-bg) !important; }
    * * * * { background-color: var(--level4-bg) !important; }
    * * * * * { background-color: var(--level5-bg) !important; }
    * * * * * * { background-color: var(--level6-bg) !important; }
    * * * * * * * { background-color: var(--level7-bg) !important; }
    * * * * * * * * { background-color: var(--level8-bg) !important; }
    * * * * * * * * * { background-color: var(--level9-bg) !important; }
}

///
/// `debug` CLASS + ATTRIBUTE UTILITIES
/// - - - - - - - - - - - - - - - - - - - - - - - - -
///

[debug], .debug {
    @include debugger();
}


///
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
///
/// CSS LAYOUT DEBUGGER ( OLD )
///
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
///
/// @description Create different depth of nodes with different colors, allowing
///              you to see the size of each element on the page, their margin
///              and their padding so you can easily identify inconsistencies.
/// @author Bruce Bentley
/// @link https://brucebentley.io/
/// @access public
/// @group utilities
///
///

@mixin debugger-old() {
    *:not(path):not(g) {
        background: rgba(0, 127, 255, 0.5) !important;
        box-shadow: none !important;
        color: rgba(255, 255, 255, 0.9) !important;
        filter: none !important;
        outline: 0.25rem solid rgba(0, 127, 255, 0.5) !important;
    }
}

///
/// `debug-old` CLASS + ATTRIBUTE UTILITIES
/// - - - - - - - - - - - - - - - - - - - - - - - - -
///

[debug-old], .debug-old {
    @include debugger-old();
}

css-layout-hack.js

/**
 * Create a bookmark and use this code as the URL, you can now toggle the CSS on/off.
 */
javascript: (function() {
  var elements = document.body.getElementsByTagName('*');
  var items = [];
  for (var i = 0; i < elements.length; i++) {
    if (
      elements[i].innerHTML.indexOf(
        '* { background-color: rgba(255, 0, 0, 0.2) !important;\
             box-shadow: none;\
             filter: none;\
             outline: 0.25rem solid rgba(102, 51, 153, 0.25); }'
      ) != -1
    ) {
      items.push(elements[i]);
    }
  }
  if (items.length > 0) {
    for (var i = 0; i < items.length; i++) {
      items[i].innerHTML = '';
    }
  } else {
    document.body.innerHTML +=
      '<style>* { background-color: rgba(255, 0, 0, 0.2) !important; box-shadow: none; filter: none; outline: 0.25rem solid rgba(102, 51, 153, 0.25); }\
              * * { background-color: rgba(0, 255, 0, 0.2) !important; }\
              * * * { background-color: rgba(0, 0, 255, 0.2) !important; }\
              * * * * { background-color: rgba(255, 0, 255, 0.2) !important; }\
              * * * * * { background-color: rgba(0, 255, 255, 0.2) !important; }\
              * * * * * * { background-color: rgba(255, 255, 0, 0.2) !important; }\
              * * * * * * * { background-color: rgba(255, 0, 0, 0.2) !important; }\
              * * * * * * * * { background-color: rgba(0, 255, 0, 0.2) !important; }\
              * * * * * * * * * { background-color: rgba(0, 0, 255, 0.2) !important; }</style>';
  }
})();

debug.css

/*!
 * - - - - - - - - - - - - - - - - - - - - - - - - -
 * CSS LAYOUT DEBUGGER
 * - - - - - - - - - - - - - - - - - - - - - - - - -
 *
 * @description Different depth of nodes with different colors, allowing you to
 *              see the size of each element on the page, their margin and their
 *              padding so you can easily identify inconsistencies.
 * @author Bruce Bentley
 * @link https://brucebentley.io/
 * @access public
 * @group utilities
 *
 */

:root {
    --level1-bg: rgba(255, 0, 0, 0.2);
    --level2-bg: rgba(0, 255, 0, 0.2);
    --level3-bg: rgba(0, 0, 255, 0.2);
    --level4-bg: rgba(255, 0, 255, 0.2);
    --level5-bg: rgba(0, 255, 255, 0.2);
    --level6-bg: rgba(255, 255, 0, 0.2);
    --level7-bg: rgba(255, 0, 0, 0.2);
    --level8-bg: rgba(0, 255, 0, 0.2);
    --level9-bg: rgba(0, 0, 255, 0.2);
    --outline: 0.25rem solid;
    --outline-bg: rgba(102, 51, 153, 0.25);
}

* { background-color: var(--level1-bg) !important; box-shadow: none; filter: none; outline: var(--outline) var(--outline-bg); }
* * { background-color: var(--level2-bg) !important; }
* * * { background-color: var(--level3-bg) !important; }
* * * * { background-color: var(--level4-bg) !important; }
* * * * * { background-color: var(--level5-bg) !important; }
* * * * * * { background-color: var(--level6-bg) !important; }
* * * * * * * { background-color: var(--level7-bg) !important; }
* * * * * * * * { background-color: var(--level8-bg) !important; }
* * * * * * * * * { background-color: var(--level9-bg) !important; }