Day9: Dev Tools Domination

Project Introduction: DOM break on & practicing console methods

Project Page: https://iris1114.github.io/javascript30/09_Dev-Tools-Domination/index.html (please open console)

Breakpoints

There are three trigger modes (can select multiple):

subtree modifications: Triggers when child elements are added, changed, or deleted
attributes modifications: Triggers when element attributes change
node removal: Triggers when an element is removed

Console Methods

1. console.log()

console.log('test')

2. console.log('%s', value)

Replaces %s in the string with specified parameters

console.log('Interpolated - my name is  %s .', 'iris') // String
console.log('Interpolated - %f dollars .', 2.55) // Float
console.log('Interpolated - %d dollars.', 4.55) // Integer

3. console.log('%c', style)

Applies CSS styles to the string using parameters

console.log('%cI am console style', 'font-size:50px; background:red;')

4. console.warning()

console.warn('OH NOOO')

5. console.error()

console.error('Shit!')

6. console.info()

console.info('Crocodiles eat 3-4 people per year')

7. console.assert()

Tests conditions and returns error message if false

const p = document.querySelector('p')
console.assert(p.classList.contains('ouch'), 'That is wrong!')

8. console.clear()

Clears all console messages

console.clear()

9. console.dir()

Shows all properties of an element

console.dir(p)

10. console.group() and console.groupEnd()

Groups output information. console.groupCollapsed() creates collapsed grouped information.

dogs.forEach((dog) => {
  console.groupCollapsed(`${dog.name}`)
  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 old`)
  console.groupEnd(`${dog.name}`)
})

11. console.count()

Counts how many times specified content appears

console.count('Wes')
console.count('Wes')
console.count('Steve')
console.count('Steve')
console.count('Wes')
console.count('Steve')
console.count('Wes')
console.count('Steve')
console.count('Steve')

12. console.time()

Measures execution time of specified tasks

console.time('fetching data')
fetch('https://api.github.com/users/wesbos')
  .then((data) => data.json())
  .then((data) => {
    console.timeEnd('fetching data')
    console.log(data)
  })

13. console.table()

Organizes data into table format for easy viewing

console.table(dogs)

References

https://guahsu.io/2017/06/JavaScript30-09-Dev-Tools-Domination/