If you are a programmer, you know very well the need for debugging code. We often use external libraries to show logs or format them. However, you may not realize that the browser console is inherently a very powerful tool for this.
When it comes to consoles, the first thing that comes to mind is
console.log right? But apart from that, there are many other useful methods. In this article, let’s see how to make the most of the console.
What is a console?
- View the log of errors and warnings of a website.
- Debug the application and view the DOM directly in the browser.
- Observe and analyze network activities.
console.log, console.error, console.warn and console.info
These are probably the most used methods. You may pass multiple parameters into these methods. The parameters will be evaluated and joined together into a string separated by a space (if the parameter is an object or an array, you can navigate between their properties).
This method allows you to group console.log (or error, info …) into a group. Its syntax is very simple: put all the
console.log lines you want to group under one
console.groupCollapsed() if you want the group to be closed by default). Then put a line
console.groupEnd() at the end of the logs you want to group.
Displaying JSON or a large JSON array with
console.log is a pretty “awful” thing. The
console.table method will help us to handle this well, which allows us to render the JSON structure in a beautiful, easy-to-see format in the form of tables.
(You can click the column name to sort.)
console.count, console.time, console.timeEnd
These three methods are like a Swiss versatile knife for programmers. The
console.count method will count the number of times the
count has been called, if passing another parameter to
count() , it will count the number of calls associated with each parameter. The
console.time method will launch a counter with the name of the counter passed as a parameter (we can run up to 10,000 counters on the same page). After running the counter, we call the
console.timeEnd() method to stop the counter and print the counter’s run time.
console.trace and console.assert
These methods will print out the faulty steps from the time it is called. Assuming you are building a JS library and you want to notify the user where the error occurred, these methods are useful in that case. The
console.trace methods are the same except that
console.assert will only print if the passed condition is not met.