I recently learned that the JavaScript console has some pretty neat features that I wasn’t aware of. I found this video to be really helpful. Among the top of the list are assert, table, group, and "%c" for custom styling.
Copy this code and execute it in your browser’s console:
// assert
console.assert(true, 'will not show');
console.assert(false, 'will show as error in console');
// table
console.table({ name: 'John', age: 20 });
console.table([{ name: 'John', age: 20 }, { name: 'Sue', age: 22 }]);
// group
console.group('My Open Group');
console.log('a');
console.log('b');
console.log('c');
console.groupEnd();
console.groupCollapsed('My Collapsed Group');
console.log('d');
console.log('e');
console.log('f');
console.groupEnd();
// "%c" for custom styling
console.log('%cHere is my text', 'background-color: purple;color:yellow;text-transform:uppercase;padding: 5px;');
It will look something like this:
