styled-components debugger. Credits to @thekitze

styledDebugger.js

import {css} from 'styled-components'
var colorIndex = -1
const getRandomColor = ()=> {
    var letters = '0123456789ABCDEF';
    //pretty colors
    const colors = [ '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B',]
    colorIndex++;
    return colors[colorIndex % colors.length];
  }
export const debug = (text, color = getRandomColor())=>{
  return css`
    border: 4px solid ${color};
    ${text && `position: relative;`}

    ${text && `&:after{
      content: '${text}';
      background-color: papayawhip;
      color: steelblue;
      padding: 2px 10px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      }`}
  `
}

Usage.js

const Box = styled.div`
  width: 70%;
  height: 24vw;
  background: white;
  border-radius: 1.2vh;
  position: relative;
  ${debug('BOX')}
`