- 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
- You can see all the code above in this
- https://bit.ly/2PJ8k8y