JSFiddle - React, Tailwind, and code Playground

by Alexander

JavaScript

console.clear();

const data4dump = { foo: 123 };
let foo = 123;
let bar = 'abc';
let baz = true;


//console.log(...$$$ `orange dump Some info for`, data4dump);
//console.log(...$$$ `blue dump Some info for "  ${data4dump.foo}  " !!!!`);

var_dump('red $', foo, bar, baz);

function var_dump(label, ...data) {
	console.log(...mark `${label}${vars `let ${data}`}`);
}

function mark(str, ...vals){
	let out = '';
  for (let [i,v] of vals.entries()) out += str[i] + v;
  out += str[vals.length];
  const [, color, label, message] = out.match(/(.+?)\s+(.+?)\s*(.*)/);
  return [
  	`%c${label} â–¸%c ${message}`,
    `color:#fff;background-color:${color};padding:0.2em 0.5em`,
    ''
  ];
}

function vars(str, ...vals) {
    let out = str[0];
    for (let [i, obj] of vals.entries()) {
        let propKeys = Object.keys(obj);
        for (let [j, propKey] of propKeys.entries()) {
            if (j>0) out += ', ';
            out += `${propKey}=${obj[propKey]}`;
        }
        out += str[i+1];
    }
    return out;
}