Useful console methods

console.js

// Paste any snippet into a console window to see it in action.

// You can filter all these in console, ie: just show info etc...
console.log('This is a plain log'); // Plain log
console.warn('This is a warning'); // Yellow with warning
console.error('This is an error'); // Red with warning
console.info('This is info'); // Blue with info
console.debug('This is debug'); // Plain log BUT type is also blue

// String substitution
console.log("My name is %s.", "Layne"); // "My name is Layne."
console.log("My name is %s, I am %d years old.", "Layne", 46); // "My name is Layne, I am 46 years old."

// CSS injections
console.log("I am %c46?!", "color: red; font-size: 33px;"); // "I am 46?!" <- But 46?! is red and HUGE

// Display objects as tables
const employees = [
  {name:"Layne", department:"interactives", gender:"male"},
  {name:"John", department:"interactives", gender:"male"},
  {name:"Dana", department:"interactives", gender:"female"},
  {name:"Ariana", department:"data", gender:"female"}
];
console.table(employees); // Display obj in a table with column headers

// Time something
console.time("runLoop");
var array = [];
for (var i = 0; i < 10000000; i++){
  array.push({index: i});  
}
console.timeEnd("runLoop"); // Output: runLoop: 3335.258ms

// Collapsed grouping in iterations
const employees2 = [
  {name:"Layne", department:"interactives", gender:"male"},
  {name:"John", department:"interactives", gender:"male"},
  {name:"Dana", department:"interactives", gender:"female"},
  {name:"Ariana", department:"data", gender:"female"}
];
for (employee of employees2) {
  console.groupCollapsed('Employee');
  console.log(employee.name);
  console.log('Male?', employee.gender === 'male');
  console.groupEnd();
} 
// Returns...
// > Employee
// > Employee  <- But triangles are expandable
// > Employee
// > Employee

// Count how many times something happens
const employees3 = [
  {name:"Layne", department:"interactives", gender:"male"},
  {name:"Dana", department:"interactives", gender:"female"},
  {name:"John", department:"interactives", gender:"male"},
  {name:"Ariana", department:"data", gender:"female"}
];
for (employee of employees3) {
  if (employee.gender === 'male'){
    console.count('Male employees');
  } else {
    console.count('Female employees');
  }
} 
// Returns...
// Male employees: 1
// Female employees: 1
// Male employees: 2
// Female employees: 2