Mastering JS console.log like a Pro

Tram Ho

  • For any Web developer console.log () is too familiar to quickly debug some problems in the code, it is like a cure for most diseases.
  • But in addition to the console.log () message most commonly used to print messages in the browser, there are many different ways to make your debugging process a lot easier. Take a look below!

Some basic consoles

console.log () | info () | debug () | warn () | error ()

  • We will print the string directly along with the appropriate color based on the type of console provided

Use placeholders

  • There are different placeholders that can be used as:
    • % o – which has an object
    • % s – which has a string
    • % d – for decimals or integers
  • For example:

Add CSS to console messages

  • In addition to just displaying a typeface on the screen, you can also add css to the console to make it more interesting, more vivid, as in the example below:

  • Or highlighting special words:

console.dir ()

  • Use console.dir () to print a JSON string

HTML elements in console

  • Get the HTML elements in the console just like inspecting elements

to count the number of times that particular count () was called

console.table ()

  • Another interesting feature of the console is that you can print a table from a JSON array, see the following example to see how cool it is:

console.group () & console.groupEnd ()

  • It is possible to group messages into a group with the console

console.count ()

  • console.count () to count the number of times that particular count () has been called

  • This function has an optional argument label .
  • If a label is provided, this function will record the number of times count () has been called with that particular label .

console.assert ()

  • This is handy when you only want to print the selected logs, which will only print the wrong arguments. It does nothing if the first argument is true.

console.trace ()

  • This method displays a trace that shows how the code ended up at a certain point

console.time ()

  • A dedicated function to track the action execution time, console.time () is a better way to track microtime made for JavaScript executions.

console.memory ()

  • What is a great way for you to check your browser’s memory usage?

console.clear ()

  • To delete all previous console messages, use console.clear ()

Refer

Share the news now

Source : Viblo