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