UniBreakfast/c4console.js

## c4console.js
// leave only one version and delete the rest, or it will throw a (nonbreaking) error

// full version: with all 11 getters and time
{
  let lastTime
  const logger = label => function() {
    const time = new Date().toLocaleTimeString('en', {hour12: false})
    console.log(time == lastTime? '':lastTime=time, label || '', this.valueOf(),
      this instanceof Node? {dir: this}: ''))
    return this.valueOf()
  }
  Object.defineProperties(Object.prototype, {
    ...[...Array(10).keys()].reduce((obj, n)=>({...obj, ['c'+n]:
      {get: logger(`/ ${n}.`)}}), {}), c: {get: logger()}})
}

// light version: without number-labeled getters or time
Object.defineProperty(Object.prototype, 'c', { get() {
  console.log('', this.valueOf(), this instanceof Node? {dir: this}: '')
  return this.valueOf()
} })

// just with time version: without number-labeled getters
{
  let lastTime
  Object.defineProperty(Object.prototype, 'c', { get() {
    const time = new Date().toLocaleTimeString('en', {hour12: false})
    console.log(time == lastTime? '':lastTime=time, this.valueOf(),
      this instanceof Node? {dir: this}: ''))
    return this.valueOf()
  } })
}

// numbered version: all 11 getters without the time
{
  const logger = label => function() {
    console.log(label || '', this.valueOf(),
      this instanceof Node? {dir: this}: '')
    return this.valueOf()
  }
  Object.defineProperties(Object.prototype, {
    ...[...Array(10).keys()].reduce((obj, n)=>({...obj, ['c'+n]:
      {get: logger(n+'.')}}), {}), c: {get: logger()}})
}

// Node.js version I use with the console in vsCode (no getters, .c() method instead)

{
  let lastTime
  Object.prototype.c = function(label) {
    const time = new Date().toLocaleTimeString('en', {hour12: false})
    console.log(time == lastTime? '': lastTime = time,
      typeof label=='string'? label+':' : typeof label=='number'? label+'.' :'',
        this.valueOf())
    return this.valueOf()
  }
}

// Node.js version without the time in it

Object.prototype.c = function(label) {
  console.log(typeof label=='string'? label+':'
    : typeof label=='number'? label+'.' :'', this.valueOf())
  return this.valueOf()
}

// example of usage for Node.js version

[1, 2, 'Boo!', 3, 'Ha-ha-ha'].c(1).map((x, i)=> typeof x == 'string'?
  `${x} `.repeat(++i).trim().c(2) : ++i*x).sort().c('after sorting').reduce((text, val)=>text+'\n'+val).c()

## showcase.html
<body></body>
<script src='c4console.js'></script>
<script>

// building a table with long and complex data transmutations
// without debugger you would have to break it in parts and use variables
// to se the intermediate values

document.body.innerHTML = Object.entries({
  names: 'john, james, jack, joshua, jasper',
  surnames: 'smith, steel, stone, scott, stein'
}).map(([key, value])=> value.split(', ')
    .map(name=> name[0].toUpperCase()+name.slice(1)).sort())
  .map((names, i, arr)=> i? '': names.map((name, j) => name+' '+arr[1][j]))[0]
  .reduce((html, name, i)=> html+`<tr><td>${i+1}.</td><td>${name}</td>
    <td>${Math.floor(Math.random()*45)+18}</td></tr>`,
      '<table border=1>'+'<tr>'+'id|name|age'.split('|')
        .map(header=>'<th>'+header+'</th>').join('')+'</tr>')+'</table>'

// with sneak peeks (note the .c added at arbitrary points)
// you can console.log the values right then and there

document.body.innerHTML = Object.entries({
  names: 'john, james, jack, joshua, jasper',
  surnames: 'smith, steel, stone, scott, stein'
}).map(([key, value])=> value.split(', ').c
    .map(name=> name[0].toUpperCase()+name.slice(1)).sort()).c
  .map((names, i, arr)=> i? '': names.map((name, j) => name+' '+arr[1][j]))[0].c
  .reduce((html, name, i)=> html+`<tr><td>${i+1}.</td><td>${name}</td>
    <td>${Math.floor(Math.random()*45).c+18}</td></tr>`,
      '<table border=1>'+'<tr>'+'id|name|age'.split('|').c
        .map(header=>'<th>'+header+'</th>').join('')+'</tr>')+'</table>'


// just access deeply nested DOM element
// not too sure what is the value at any given point?
// again, to see them you would have to break it and use console.log

document.body
  .children[0].children[0].children[3].children[1].innerText

// or you can just add sneak peeks (again, .c or .cX if you chose a numbered version)

document.body
  .children.c0[0].c1.children.c2[0].c3.children.c4[3].c5.children[1].c6.innerText

// be sure to check the console!

</script>
	// leave only one version and delete the rest, or it will throw a (nonbreaking) error

	// full version: with all 11 getters and time
	{
	let lastTime
	const logger = label => function() {
	const time = new Date().toLocaleTimeString('en', {hour12: false})
	console.log(time == lastTime? '':lastTime=time, label \|\| '', this.valueOf(),
	this instanceof Node? {dir: this}: ''))
	return this.valueOf()
	}
	Object.defineProperties(Object.prototype, {
	...[...Array(10).keys()].reduce((obj, n)=>({...obj, ['c'+n]:
	{get: logger(`/ ${n}.`)}}), {}), c: {get: logger()}})
	}

	// light version: without number-labeled getters or time
	Object.defineProperty(Object.prototype, 'c', { get() {
	console.log('', this.valueOf(), this instanceof Node? {dir: this}: '')
	return this.valueOf()
	} })

	// just with time version: without number-labeled getters
	{
	let lastTime
	Object.defineProperty(Object.prototype, 'c', { get() {
	const time = new Date().toLocaleTimeString('en', {hour12: false})
	console.log(time == lastTime? '':lastTime=time, this.valueOf(),
	this instanceof Node? {dir: this}: ''))
	return this.valueOf()
	} })
	}

	// numbered version: all 11 getters without the time
	{
	const logger = label => function() {
	console.log(label \|\| '', this.valueOf(),
	this instanceof Node? {dir: this}: '')
	return this.valueOf()
	}
	Object.defineProperties(Object.prototype, {
	...[...Array(10).keys()].reduce((obj, n)=>({...obj, ['c'+n]:
	{get: logger(n+'.')}}), {}), c: {get: logger()}})
	}

	// Node.js version I use with the console in vsCode (no getters, .c() method instead)

	{
	let lastTime
	Object.prototype.c = function(label) {
	const time = new Date().toLocaleTimeString('en', {hour12: false})
	console.log(time == lastTime? '': lastTime = time,
	typeof label=='string'? label+':' : typeof label=='number'? label+'.' :'',
	this.valueOf())
	return this.valueOf()
	}
	}

	// Node.js version without the time in it

	Object.prototype.c = function(label) {
	console.log(typeof label=='string'? label+':'
	: typeof label=='number'? label+'.' :'', this.valueOf())
	return this.valueOf()
	}

	// example of usage for Node.js version

	[1, 2, 'Boo!', 3, 'Ha-ha-ha'].c(1).map((x, i)=> typeof x == 'string'?
	`${x} `.repeat(++i).trim().c(2) : ++i*x).sort().c('after sorting').reduce((text, val)=>text+'\n'+val).c()
	<body></body>
	<script src='c4console.js'></script>
	<script>

	// building a table with long and complex data transmutations
	// without debugger you would have to break it in parts and use variables
	// to se the intermediate values

	document.body.innerHTML = Object.entries({
	names: 'john, james, jack, joshua, jasper',
	surnames: 'smith, steel, stone, scott, stein'
	}).map(([key, value])=> value.split(', ')
	.map(name=> name[0].toUpperCase()+name.slice(1)).sort())
	.map((names, i, arr)=> i? '': names.map((name, j) => name+' '+arr[1][j]))[0]
	.reduce((html, name, i)=> html+`<tr><td>${i+1}.</td><td>${name}</td>
	<td>${Math.floor(Math.random()*45)+18}</td></tr>`,
	'<table border=1>'+'<tr>'+'id\|name\|age'.split('\|')
	.map(header=>'<th>'+header+'</th>').join('')+'</tr>')+'</table>'

	// with sneak peeks (note the .c added at arbitrary points)
	// you can console.log the values right then and there

	document.body.innerHTML = Object.entries({
	names: 'john, james, jack, joshua, jasper',
	surnames: 'smith, steel, stone, scott, stein'
	}).map(([key, value])=> value.split(', ').c
	.map(name=> name[0].toUpperCase()+name.slice(1)).sort()).c
	.map((names, i, arr)=> i? '': names.map((name, j) => name+' '+arr[1][j]))[0].c
	.reduce((html, name, i)=> html+`<tr><td>${i+1}.</td><td>${name}</td>
	<td>${Math.floor(Math.random()*45).c+18}</td></tr>`,
	'<table border=1>'+'<tr>'+'id\|name\|age'.split('\|').c
	.map(header=>'<th>'+header+'</th>').join('')+'</tr>')+'</table>'


	// just access deeply nested DOM element
	// not too sure what is the value at any given point?
	// again, to see them you would have to break it and use console.log

	document.body
	.children[0].children[0].children[3].children[1].innerText

	// or you can just add sneak peeks (again, .c or .cX if you chose a numbered version)

	document.body
	.children.c0[0].c1.children.c2[0].c3.children.c4[3].c5.children[1].c6.innerText

	// be sure to check the console!

	</script>