Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
@cyan33

This comment has been minimized.

cyan33 commented Aug 3, 2018

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

@cyan33

This comment has been minimized.

cyan33 commented Aug 3, 2018

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.

@ashtonsix

This comment has been minimized.

ashtonsix commented Aug 3, 2018

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

@lqs469

This comment has been minimized.

lqs469 commented Aug 3, 2018

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

@bvaughn

This comment has been minimized.

Owner

bvaughn commented Sep 25, 2018

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

screen shot 2018-09-25 at 8 17 07 am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment