This repository contains two essential files designed to aid in the debugging of CSS issues during the development of web interfaces: debug.css and debug.js. These tools provide visual cues and console outputs to facilitate the identification and resolution of styling issues.
- Outlines for DOM Element Nesting: Applies distinct colored outlines to elements up to seven levels deep using
box-shadow. This method ensures the actual dimensions of the elements are not affected. - Color-Coded Debugging: Offers a simple mechanism to apply a faint background color to any element marked with the
debugclass, further differentiated by color codes representing the seven colors of the rainbow (r, o, y, g, b, i, v).
- Console Output for Computed Styles: For any element with the
debugclass, the script outputs the computed CSS values to the browser's console, facilitating a detailed inspection of applied styles.
Link the debug.css file in the <head> of your HTML document:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akaienso/debug-css/debug.css">or enqueue it in a WordPress plugin or theme:
wp_enqueue_style('akaienso-debug-css', 'https://cdn.jsdelivr.net/gh/akaienso/debug-css/debug.css');Include the debug.js script just before the closing </body> tag in your HTML document:
<script src="https://cdn.jsdelivr.net/gh/akaienso/debug-css/debug.js"></script>or enqueue it in a WordPress plugin or theme:
wp_enqueue_script('akaienso-debug-js', 'https://cdn.jsdelivr.net/gh/akaienso/debug-css/debug.js', null, null, false);Add the debug class to any element you wish to inspect, and optionally add a single-letter class (r, o, y, g, b, i, v) to color-code the background for visual inspection:
<div class="flex-row">
<h3>Level 3: Grandchild</h3>
<p class="debug b">Responsive item</p>
<p class="debug g">Responsive item</p>
</div>
Contributions are welcome! If you wish to improve or extend the functionality, please fork this repository, make your changes, and submit a pull request.
This project is open-sourced under the MIT license. Feel free to use, modify, and distribute it as needed. We only ask that you provide attribution back to this repository.