debug helper

debug.css

[data-debug-mode='true'] * {
  outline: 1px solid cyan !important;
}

[data-debug-mode='true'] body:before {
  background: rgb(0,0,0,.85);
  color: #fff;
  content: 'standard';
  transition: all 1s;
  font-weight: 100;
  display: block;
  /* opacity: 0.4; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font: 1rem/1 monospace;
  font-size: calc(.5rem + .5vw);
  padding: 1vw 2vh;
  line-height: 1;
  transition: 1s all ease-in-out:
}

/* from branding */
/* mobile: 340 */
/* tablet: 1112 */
/* desktop: 1920 */
/* widescreen: 2440 */

/* inspired from list: https://material.io/resources/devices/ */

@media (min-width: 340px) {
  [data-debug-mode='true'] body:before {
    background: rgb(255,0,0,.75);
    font-weight: 200;
    content: 'min-width: 340px';
  }
}

@media (min-width: 720px) {
  [data-debug-mode='true'] body:before {
    background: rgb(255,0,255,.75);
    font-weight: 200;
    content: 'min-width: 720px';
  }
}

@media (min-width: 1080px) {
  [data-debug-mode='true'] body:before {
    background: rgb(255,0,255,.75);
    font-weight: 200;
    content: 'min-width: 1080px';
  }
}

@media (min-width: 1112px) {
  [data-debug-mode='true'] body:before {
    background: rgb(0,0,255,.75);
    font-weight: 400;
    content: 'min-width: 1112px';
    /* opacity: .6; */
  }
}

@media (min-width: 1440px) {
  [data-debug-mode='true'] body:before {
    background: rgb(255,255,0,.75);
    font-weight: 400;
    content: 'min-width: 1440px';
    /* opacity: .6; */
  }
}

@media (min-width: 1920px) {
  [data-debug-mode='true'] body:before {
    background: rgb(255,0,255,.75);
    font-weight: 500;
    content: 'min-width: 1920px';
    /* opacity: .85; */
  }
}

@media (min-width: 2440px) {
  [data-debug-mode='true'] body:before {
    background: rgb(0,255,255,.75);
    font-weight: 600;
    content: 'min-width: 2440px';
    /* opacity: .95; */
  }
}

debug.js

(function() {
  const injected = {
    css: {}
  };

  function enableDebugMode() {
    if (debugMode) {
      injectCSS('debug.css');
      document.documentElement.setAttribute('data-debug-mode', 'true');
      window.history.replaceState({}, null, window.location.pathname + '?debug=1' + window.location.hash);
    } else {
      window.history.replaceState({}, null, window.location.pathname + window.location.hash);
    }
    document.documentElement.setAttribute('data-debug-mode', debugMode);
  }
  let debugMode = false;
  if (window.location.search.includes('debug=1')) {
    debugMode = true;
    enableDebugMode();
  }

  window.addEventListener('keyup', evt => {
    if (evt.target.matches('html, body') && evt.key === 'd') {
      debugMode = !debugMode;
    }
    enableDebugMode();
  });

  function injectCSS(href) {
    if (href in injected.css) {
      return;
    }
    injected.css[href] = true;
    const styleEl = document.createElement('link');
    styleEl.rel = 'stylesheet';
    styleEl.href = 'debug.css';
    document.head.appendChild(styleEl);
  }
})();

main.js

const enableDebugMode = window.location.protocol === 'http:';
if (enableDebugMode) {
  const scriptEl = document.createElement('script');
  scriptEl.async = true;
  scriptEl.src = 'debug.js';
  document.head.appendChild(scriptEl);
}