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
Share: