Mastering console.log()

Mastering console.log()

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.

Capture.PNG

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

Capture.PNG

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.

1.png

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()

1.png

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.

2.png

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.

Capture.PNG

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()

2.png

Capture2.PNG

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.

count1.png

If the parameter which is a label is supplied the function logs the number of times the function has been called with the label.

count2.png

If the parameter is not supplied it logs the number of times the function has been called without the label.

coun3.png

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.

assert.PNG

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.

trace.PNG

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.

memory.PNG

console.clear()

To clear all of the things you have been trying on the console, use console.clear()

Thank you for reading!
Happy learning