JSFiddle - React, Tailwind, and code Playground

Playing with styled console logs.

by Travis Almand

HTML

<button data-console="clear">console.clear()</button>

<hr />

<button data-console="debug">console.debug()</button>
<button data-console="error">console.error()</button>
<button data-console="info">console.info()</button>
<button data-console="log">console.log()</button>
<button data-console="warn">console.warn()</button>

<hr />

<button data-console="assert">console.assert()</button>

<hr />

<button data-console="count">console.count()</button>

<hr />

<button data-console="dir">console.dir()</button>
<button data-console="dirxml">console.dirxml()</button>

<hr />

<button data-console="group">console.group()</button>
<button data-console="groupCollapsed">console.groupCollapsed()</button>

<hr />

<button data-console="table_array_simple">console.table(simple array)</button>
<button data-console="table_array_complex">console.table(complex array)</button>
<button data-console="table_object_simple">console.table(simple object)</button>
<button data-console="table_object_complex">console.table(complex object)</button>

<hr />

<button data-console="time">console.time()</button>

<hr />

<button data-console="trace">console.trace()</button>

<hr />

<button data-console="debugger">debugger</button>

CSS

button {
  display: block;
  margin: 10px;
}

JavaScript

const coders = [
	{
  	firstName: 'Margaret',
    lastName: 'Hamilton',
    born: {
    	month: 'August',
      day: 17,
      year: 1936
    }
  },
  {
  	firstName: 'Grace',
    lastName: 'Hopper',
    born: {
    	month: 'December',
      day: 9,
      year: 1906
    }
  },
  {
  	firstName: 'Jean',
    lastName: 'Bartik',
    born: {
    	month: 'December',
      day: 27,
      year: 1924
    }
  },
  {
  	firstName: 'Ada',
    lastName: 'Lovelace',
    born: {
    	month: 'December',
      day: 10,
      year: 1815
    }
  },
  {
  	firstName: 'Joan',
    lastName: 'Clarke',
    born: {
    	month: 'June',
      day: 24,
      year: 1917
    }
  }
];

const consoles = {
	clear: () => {
  	console.clear();
  },
  assert: e => {
  	console.assert(true, 'console.assert()');
  	console.assert(false, 'console.assert()');
    console.assert(false, coders[0]);
		console.assert(false, coders);
    console.assert(e.target);
  },
  count: () => {
  	console.count();
    console.count();
    
    console.count('label');
    console.count('label');
    console.countReset('label');
    console.count('label');
  },
  debug: e => {
  	console.debug('console.debug()');
    console.debug(coders[0]);
		console.debug(coders);
    console.debug(e.target);
  },
  debugger: () => {
  	console.log('debugger');
    debugger;
  },
  dir: e => {
  	console.dir(e.target);
  },
  dirxml: e => {
  	console.dirxml(e.target);
  },
  error: e => {
  	console.error('console.error()');
    console.error(coders[0]);
		console.error(coders);
    console.error(e.target);
  },
  group: () => {
  	console.group('group');
    console.log('console.group()');
    console.log(coders[0]);
    console.log(coders);
    console.groupEnd('group');
  },
  groupCollapsed: () => {
  	console.groupCollapsed('group');
    console.log('console.groupCollapsed()');
    console.log(coders[0]);
    console.log(coders);
    console.groupEnd('group');
  },
  info: e => {
  	console.info('console.info()');
   ...