useful console logs examples

console.js

// https://developers.google.com/web/tools/chrome-devtools/console/?hl=es

const dogs = [{name: 'Snokers', age: 2}, {name: 'Dogger', age: 8}]
// regular 
console.log('hello')
// interpolate 
console.log('Hello i am %s old', dogs[0].age)
// template string whit Esc6
console.log(`Hello i am ${dogs[0].age} old`)
// styled
console.log('%c hello browser', 'font-size:50px; background:red;  text-shadow:10px 10px 0 blue')
// warring
console.warn('WTF')
// error
console.error('DAAHHM')
// info
console.info('The bushes and clouds in Super Mario Bros are the same, just colored differently.')
// testing false show
console.assert(1===2, 'should not happend')
// cleaning
console.clear()
// view DOM elements
const p = document.querySelector('p')
console.log(p)
console.dir(p)
// grouping together
dogs.forEach(dog => {
	console.group(`${dog.name}`) // groupCollaosed
	console.log(`This is ${dog.name}`)
	console.log(`${dog.name} is ${dog.age} years old`)
	console.log(`${dog.name} is ${dog.age * 7} dog years`)
	console.groupEnd(`${dog.name}`)
})
// table 
console.table(dogs)
// counting
console.count('wes')
console.count('ram')
console.count('ram')
console.count('wes')
console.count('ram')
console.count('wes')
//timing
console.time('fetch data')
fetch('https://api.github.com/users/wolftrax5')
.then(data => data.json())
.then(data => {
console.timeEnd('fetch data')
console.log(data)
})