console-colors.js

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args
    );
    console.log(
      new Error("stack").stack
        .split("\n")
        .slice(2)
        .join("\n")
    );
    console.groupEnd();
  };

  return logger;
};

const log = {
  blue: createLogger("#1E88E5", "#90CAF9"),
  brown: createLogger("#6D4C41", "#D7CCC8"),
  gray: createLogger("#212121", "#BDBDBD"),
  green: createLogger("#388E3C", "#A5D6A7"),
  red: createLogger("#E53935", "#EF9A9A"),
  orange: createLogger("#F4511E", "#FFAB91"),
  purple: createLogger("#8E24AA", "#E1BEE7"),
  yellow: createLogger("#FFD600", "#FFF59D")
};

module.exports = log;

I learned from this script that you could access the array variable through:

const [a, b] = ['hello', 'world'];

similarly like:

const {a, b} = {a: 'hello', b: 'world'}

I love JavaScript so much <3

I thought if someone works on the React team for a long time, he would probably forget how to use reduce and those fancy syntax of ES6/7. But turns out that is not the case with Brian.

Brain, we love you! But we only have 14 hours to save your console! SAVIOUR OF THE UNIVERSE!

Sometime longerMessage could be Object, will print [Object object]. Maybe use JSON.stringify(longerMessage, null, 2)?

Updated the gist to add stack traces as well (within a collapsed console group):