In this lesson I learned about the tools and methods that are available inside of the console.
Regular console.log() - Outputs whatever you pass into it, String, variable, array, etc.
Interpolated console.log(`${value}`) - Injecting values into a string using es6 template strings.
Styled console.log('%c Styled console.log', 'font-size: 3em;') - A way to style the console log with CSS.
console.warn(), console.error(), console.info() - Various types of alerts you can display in the console.
console.assert(p.classList.contains('ouch'), 'Error Message') - log an error when a test fails.
console.clear() - Wipe the console clean.
console.log(p) - Display the <element>
console.dir(p) - display the available methods and properties for an <element>.
console.group(`${dog.name}`) / console.groupEnd(`${dog.name}`) - Creating a collapsable group of logs in the console.
console.count() - Each time the same item appears, it will log the item, and will also increment the counter of occurrences from that logged item.
console.time('fetching data') / console.timeEnd('fetching data') - Times how long something takes to happen between the starting and ending methods.
console.table() - Takes in an array of objects, assuming they all have the same properties, displays the data in a table format inside of the console.
See the Pen
JavaScript30 - 9 - Dev Tools Domination by Corey Noble (@CoreyNoble)
on CodePen.