Day9: Dev Tools Domination
DOM break on & practicing console methods
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) // Integer3. 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/
Related Posts
Day28: Video Speed Controller
How to implement video playback speed control using JavaScript.