Notes on Console

gistfile1.txt

https://developer.mozilla.org/en-US/docs/Web/API/Console

# 2 ways to access

window.console.log("Hello World")
console.log("Yo, sup world!")

# Four different levels of output

console.log("Hello World")  // console.debug is it's alias
console.info("The fastest Rubik's Cube solve by foot in %f seconds", 20.57)
console.warn("Cheetos are addictive")
console.error("This is an error")

# Clear the console

console.clear()

# Substitions

console.info("My son is Oliver, but he looks like a Json: %o", { person: { name: "Oliver Price" } });
console.info("My son is Oliver, but he looks like a Json: %O", { person: { name: "Oliver Price" } });
console.warn("New air-conditioners cost about $%f", 3500.75)
console.warn("In CT is %i degrees. Yesterday it rained %d inches", 72, 2);

#ES6 For the Win
const lang="ES6";
console.info(`I really like ${lang}`);

# Use %c to apply css
const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');
console.info('%c This is a success', success);
console.error('%c This is a failure!!', failure);

# Using Table

const fam = [
{ firstname: "Whitney", lastname: "Price" },
{ firstname: "Oliver", lastname: "Price" },
{ firstname: "Ted", lastname: "Price" }]
console.table(fam)

const cities = ["NYC", "LA", "Honolulu", "Chicago", "West Hartford"]
console.table(cities) //Firefox
console.table([cities]) //Webkit

# Grouping 

console.group();
console.log('Whitney');
console.group("Names of %i children:", 2);
console.log('Oliver')
console.log('WIP: Baby #2')
console.groupEnd();
console.log('Ted');
console.groupEnd();

# Timing
var id='123'
console.time(id)
console.timeEnd(id)

# trace
function foo() {
  function bar() {
    baz = () => console.trace();
    baz();
  }
 bar() 
}
foo()

More fun here and YMMV depending on the browser:

https://developer.mozilla.org/en-US/docs/Web/API/Console