Console - Javascript
- Basic
- Console shows the latest value of the object when it is expanded, Print a clone of that object to get around this
- Types
console.log() => Prints in console
console.log("value", value) => Prints multiple items
console.debug() => Prints in "verbose" section in console
console.info() => Prints in "info" section in console
console.warn() => Prints in "warning" section in console
console.error() => Prints in "error" section in console
console.dir(var) => Prints Object from of the given element instead of HTML, Expands as a JSON object
console.table() => Prints an Array of Objects as table, Sort it by clicking on the table header
console.group("Name") => Groups all the consols between this, Giving name is optional, Open by default
console.groupCollapsed("Name") => Groups all the consols between this, Giving name is optional, Closed by default
console.groupEnd()
- Can also nest groups inside group
console.time("val") => Prints time taken by the code written between these 2, Starts the timer
console.timeLog("val") => Prints the time taken till now without ending the timer
console.timeEnd("val") => Ends the timer and prints the value
console.profile("val") => Prints all the information about the code in between, Go to More tools > JavaScript Profiler to see
console.timeStamp("val")
console.profileEnd("val")
console.assert(condition, "value") => Checks condition and shows value as a error if condition fails, Does not log anything if condition is true
console.clear() => To clear console area
console.trace() => Prints stack trace
console.count("Name") => Counts number of times it runs
console.countReset("Name") => Reset Count
- Formatting
console.log("value: %s", "value") => %s placeholder is replaced by the next value given
- %i represents integer, %o represents Object, %f represents floating value
console.log("Normal, %cGreen, %cRed", "color: green", "color: red")
- CSS is applied to everything after %c to next %c