Three years into my developer journey and the most important skill I learned is debugging. Debugging is a combination of gathering information, problem solving, and knowing how to use the tools you have available. Writing a code can be learned from videos and tutorials, but debugging is something that can be mastered over time with practice and patience.
One of the ways of debugging is printing the output and analyzing it. So console.log() is the most common practice among JavaScript developers for printing outputs and messages. Before we move forward the console is a panel in the browser which displays important messages like errors and warnings for developers. In JS, console keyword refers to an object- a collection of data and actions that we can use in our code and perform desirable actions.
One action, or method, that is built into the console object is the .log() method. When we write console.log() what we put inside the parentheses will get printed, or logged, to the console.
Apart from the most commonly used console.log() message to print the message in the browser there are plenty of different ways to make your debugging process a lot easier.
Common Console Methods
console. info()- Informative logging of information
console.debug() – Outputs a message to the console with the log level debug
console.warn() – Outputs a warning message
console.error() – Outputs an error message
Adding CSS styles to console messages
Styling can be added to the console messages using the CSS format specifier to make it look more catchy if needed.
Printing a JSON representation of an object
console.dir() - It displays the list of all the properties of an object. In simpler words we can get the JSON representation of an object by using console.dir()
Accessing HTML Elements in the Console
We can access the HTML element of the page and display the same in the console, just like inspecting some element.
Printing a table in Console
One of the ways of viewing JSON properly in console is by putting it in table using console.table(), for better understanding or representation.
Grouping Console Message
We can group or nest console messages together for better understanding of the functionality or the code we are working on by using console.group()
Getting Count in Console
The console.count() function logs the number of times the function has been called. It takes an optional parameter with it.
If the parameter which is a label is supplied the function logs the number of times the function has been called with the label.
If the parameter is not supplied it logs the number of times the function has been called without the label.
console.assert()
This function will come in handy when we need to check a condition and log if the condition fails. No action will be taken if the condition is true.
console.trace()
This function will log the trace of the method, or how did we end up at a certain method or line in a code.
console.memory
This function will log the memory usage of the browser and can help us know how the memory is being used by the application.
console.clear()
To clear all of the things you have been trying on the console, use console.clear()
Thank you for reading!
Happy learning