The web browser console is one of the most extensively used tools for debugging front-end applications. The Console API provides developers the ability to tackle errors and log messages.
console.log() is probably the most commonly used method in the Console API, but there are other methods too that you can use in your workflow. This guide shows you the different web browser console methods that you can use to improve your debugging workflow.
Why Is Logging Important?
Logging to the web browser console is one of the best methods of debugging front-end or JavaScript-based applications.
Most modern web browsers support the Console API, making it readily available to developers. The console object is responsible for providing access to the browser's debugging console. The implementation may be different across browsers but most methods will work in all modern browsers.
Tip: Your browser console can run all code discussed in this guide. Press F12 on your keyboard to open the browser developers' tools in Chrome or Firefox.
Logging String Messages
One of the most common console methods is console.log(). It simply outputs a string message or some value to the web console. For simple values or string messages, the console.log() method is probably the best option to use.
To output a Hello World message, you can use the following.
console.log(`Hello World`);
Another special feature of the console.log() method is the ability to print the output of DOM elements or the structure of a part of a website, for example, to output the structure of the body element and everything inside it use the following.
console.log(document.body)
The output is a collection of DOM elements as an HTML tree.
Logging Interactive JavaScript Objects
The console.dir() method is used for logging interactive properties of JavaScript objects. For example, you can use it to view the DOM elements in a webpage.
The typical output of the console.dir() method is comprised of all the properties of the specified JavaScript Object in JSON format. Use the method below to print the properties of all elements in the body of an HTML page:
console.dir(document.body)
Evaluating Expressions
You might be familiar with assert methods from unit testing—well the console.assert() method works in a similar manner. Use the console.assert() method to evaluate an expression or condition.
When the assert method fails, the console prints out an error message; otherwise, it prints nothing. Use the code below to evaluate whether a person's age is greater than 18:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = "You have to be older than 18 years of age";
console.assert( yourAge > ageLimit, assertFailMessage);
The assert above fails and an error message prints accordingly.
Logging Data in Tables
Use the console.table() method to display data in a tabular format. Good candidates to display in table form include arrays or object data.
Note: Some browsers, like Firefox, have a maximum limit of 1,000 rows that can be displayed with the console.table() method.
Assuming you have the following array of car objects:
let cars = [
{"color":"purple", "type":"minivan", "registration": new Date('2021-04-05')},
{"color": "red", "type":"minivan", "registration": new Date ('2021-06-10')}
]
You can display the array above in a table using the method below:
console.table(cars);
Logging Messages by Category
Web browser console messages are mainly categorized into three groups: error, warning, and info.
Errors
To specifically print error messages to the console using the console.error() method, error-related messages are displayed in red font.
console.error('error message');
Warnings
To print warnings, use the following. As with most scenarios, warning messages are displayed in orange:
console.warn('warning message');
Info
To print general information to the console, use the console.info() method:
console.info('general info message')
It's easy to filter or find messages in the browser console when they're properly categorized.
Tracing Program Flow
Use the console.trace() method to print a stack trace of program flow or execution. This is a very useful feature for debugging because it prints the order in which functions are executed in your program.
To see the console.trace() method in action, you can create three functions (as per below) and place a stack trace in one of the functions.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}
In your browser console, call or trigger functionOne() and you'll get a stack trace of the function calls printed in the Last In First Out Order (LIFO) because it's a stack.
Timing Program Execution
To time how long an operation takes to execute in your program, you can use the console.time() method. console.time() is typically used together with the console.timeEnd() method where the latter is used to end the timer.
You can have up to 10,000 timers running per webpage, highlighting the importance of properly label your timers.
To time how long a for loop takes to go through the numbers 1 to 50,000, you can use the timer as follows.
console.time('loop timer 2');
for(i=1; i< 50001; i++){
}
console.timeEnd('loop timer 2');
Counting
The console.count() method is used to keep track of the number of times a function or some piece of code has been called in a program. For example, we can keep track of the number of times a for loop has executed as follows:
for(i=0; i<4; i++ ){
console.count();
}
Grouping Log Messages
Just like the timer method, the console.group(), and console.groupEnd() methods are usually used in pairs.
The group method helps you to better organize your log messages. For example, we can create a group of warning messages with the label “warnings” as follows.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()
The two messages within the warning group are visually categorized as seen in the output below.
Clearing the Console
Last but not least, here are several ways in which you can clear log messages in your browser console.
Use the console.clear() method as follows.
console.clear()
You can also clear the browser console using browser keyboard shortcuts.
Google Chrome: Ctrl + L
Firefox: Ctrl + Shift + L
Using the Browser Console to the Fullest
This guide has shown you some of the different available web browser console methods to help you debug front-end applications. The console API is very lightweight, easy to learn, and widely supported in most modern browsers.
Make a CAPTCHA validation form your next project and put your new debugging skills to the test!