Skip to content

Instantly share code, notes, and snippets.

@paceaux
Last active October 15, 2022 08:43
Show Gist options
  • Save paceaux/92695c6adbaf9a29ffc7550fecda5419 to your computer and use it in GitHub Desktop.
Save paceaux/92695c6adbaf9a29ffc7550fecda5419 to your computer and use it in GitHub Desktop.
A Sass/SCSS debug mixin
.isDebugging .debug {
outline: 1px solid rgba(200, 100, 50, 0.9);
}
.isDebugging .debug * {
outline: 1px solid rgba(200, 100, 50, 0.9);
}
.isDebugging .debug-bg {
outline: 1px solid rgba(200, 100, 50, 0.9);
background: rgba(200, 100, 50, 0.1);
}
.isDebugging .debug-bg * {
background: rgba(200, 100, 50, 0.1);
}
/**
* @class Debug
* @classdesc A small utility for debugging.
*
*/
class Debug {
constructor() {
this.init();
}
/**
* determines if debugging has been unlocked from sessionStorage
* @type {boolean}
*/
get isUnlocked() {
const storageItem = sessionStorage.getItem('isDebugging');
return storageItem === 'true';
}
/** logs an optionally styled message in the console
* @method
* @param {string} message message to be sent to the console
* @param {string} [styles=''] CSS styles to be added to the message
*/
static logMessage(message, styles = '') {
console.log(`${styles && '%c'} ${message}`, styles || ' ');
}
/**
* "unlocks" debugging by adding a classname and putting value in sessionStorage
* @method
* @static
*/
static unlock() {
document.body.classList.add('isDebugging');
sessionStorage.setItem('isDebugging', 'true');
Debug.logMessage('debugging unlocked');
}
/**
* binds any events used by debugging
* This includes event listener that checks for keystrokes
* @method
* @static
*/
static bindEvents() {
// up up down down left right left right b a
const keys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
let keysIndex = 0;
const keydownTracker = (event) => {
const nextKey = keys[keysIndex++];
if (event.keyCode === nextKey) {
if (keysIndex === keys.length) {
document.removeEventListener('keydown', keydownTracker);
Debug.unlock();
}
}
};
document.body.addEventListener('keydown', keydownTracker);
}
/**
* Initializes the module
*/
init() {
if (this.isUnlocked) {
Debug.unlock();
}
Debug.logMessage('Debugger available', 'color: #ef8c23');
Debug.bindEvents();
}
};
export default Debug;
// * Usage
// * @include debug(); // draws outlines around parent and children
// * @include debug(true); // draws outline around parent, puts semi-transparent background on parent and children
@mixin debug($useBackground:false) {
outline: 1px solid rgba(200, 100, 50, 0.9);
@if ($useBackground) {
background: rgba(200, 100, 50, 0.1);
* {
background: rgba(200, 100, 50, 0.1);
}
} @else {
* {
outline: 1px solid rgba(200, 100, 50, 0.9);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment