Skip to content

Instantly share code, notes, and snippets.

@rajatk16 rajatk16/logger.js
Created Jul 17, 2018

Embed
What would you like to do?
(function (e) {
const n = console.log;
const o = document.querySelector (e.selector);
const t = e.globalName || 'logger';
i (o, {
background: e.colors.background,
color: e.colors.foreground,
fontFamily: 'monospace',
});
function r (e) {
return {}.toString.call (e) === '[object Array]';
}
function l (e) {
return {}.toString.call (e) === '[object Object]';
}
function c (e) {
return e && typeof e.inspect === 'function';
}
function i (e, n) {
Object.assign (e.style, n);
return e;
}
function u (e) {
const n = document.createElement ('span');
if (e.tagName) {
n.appendChild (e);
} else {
n.innerText = e;
}
return n;
}
function a (n) {
const o = document.createElement ('span');
o.appendChild (u ('{ '));
Object.keys (n).reduce (function (o, t, r, l) {
o.appendChild (i (u (t + ': '), {color: e.colors.key}));
o.appendChild (s (n[t]));
if (r < l.length - 1) {
o.appendChild (u (', '));
}
return o;
}, o);
o.appendChild (u (' }'));
return o;
}
function d (e) {
const n = document.createElement ('span');
n.appendChild (u ('[ '));
e.reduce (function (n, o, t) {
n.appendChild (s (o));
if (t < e.length - 1) {
n.appendChild (u (', '));
}
return n;
}, n);
n.appendChild (u (' ]'));
return n;
}
function s (n) {
if (c (n)) {
return s (n.inspect ());
} else if (typeof n === 'number') {
return i (u (n), {color: e.colors.number});
} else if (typeof n === 'string') {
return i (u ("'" + n + "'"), {color: e.colors.string});
} else if (typeof n === 'boolean') {
return i (u (n), {color: e.colors.boolean});
} else if (typeof n === 'function') {
return i (u ('Function'));
} else if (r (n)) {
return u (d (n));
} else if (l (n)) {
return u (a (n));
} else if (n === undefined) {
return i (u ('undefined'), {
fontStyle: 'italic',
color: e.colors.boolean,
});
} else if (n === null) {
return i (u ('null'), {fontStyle: 'italic', color: e.colors.boolean});
}
}
function f (n, o) {
const t = document.createElement ('dl');
const r = document.createElement ('dt');
const l = document.createElement ('dd');
i (t, {
padding: '0',
margin: '0',
marginBottom: '0.6em',
fontSize: e.fontSize,
});
i (r, {
color: e.colors.label,
fontWeight: 600,
fontSize: '1.1em',
margin: '0',
});
i (l, {padding: '0 0.75em', margin: '0'});
r.innerText = n + ':';
l.appendChild (s (o));
t.appendChild (r);
t.appendChild (l);
return t;
}
function p (n) {
return i (u (s (n)), {
display: 'block',
margin: '0',
marginBottom: '0.6em',
fontSize: e.fontSize,
});
}
function g () {
o.appendChild (
arguments.length > 1 ? f (arguments[0], arguments[1]) : p (arguments[0])
);
n.apply (console, arguments);
}
e.root[t] = g;
console.log = g;
}) ({
globalName: 'log',
root: window,
selector: 'body',
fontSize: '28px',
colors: {
background: 'transparent',
foreground: 'gray',
label: 'blue',
nil: 'green',
number: 'violet',
string: 'red',
key: 'blue',
boolean: 'green',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.