One of the most used tools for debugging front-end applications is the web browser console. The Console API allows developers to troubleshoot errors and log messages.
console.log () is probably the most commonly used method in the Console API, but there are other methods you can use in your workflow as well. This guide walks you through the different web browser console methods you can use to improve your debugging workflow.
Why is journaling important?
Logging in to the web browser console is one of the best methods for debugging front-end or JavaScript-based applications.
Most modern web browsers support the Console API, making it easily accessible to developers. The console object is responsible for providing access to the browser’s debugging console. The implementation may be different from browser to browser, but most of the methods work in all modern browsers.
advice: Your browser’s console can run all of the code described in this guide. hurry F12 on your keyboard to open browser developer tools in Chrome or Firefox.
Channel message logging
One of the most common console methods is console.log (). It simply returns a string message or value to the web console. For single values ​​or string messages, the console.log () is probably the best option to use.
To take out a Hi world message, you can use the following.
console.log(`Hello World`); Another peculiarity of the console.log () method is the ability to print the output of DOM elements or the structure of part of a website, for example, to display the structure of the body element and everything in it uses the following.
console.log(document.body) The output is a collection of DOM elements in the form of an HTML tree.
Logging interactive JavaScript objects
the console.dir () is used to log interactive properties of JavaScript objects. For example, you can use it to display DOM elements in a web page.
The typical output of console.dir () The method includes 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) Evaluation of expressions
You may be familiar with unit test assertion methods. console.assert () The method works the same. Use the console.assert () method to evaluate an expression or a condition.
When the assert method fails, the console prints an error message; otherwise, it prints nothing. Use the code below to assess whether a person’s age is over 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 above assertion fails and an error message prints as a result.
Logging data to tables
Use the console.table () method to display the data in a tabular format. Good candidates to display as a table include tables or object data.
To note: Some browsers, like Firefox, have a maximum limit of 1000 lines that can be displayed with the console.table () method.
Assuming you have the following car object array:
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 above table in a table using the method below:
console.table(cars); Logging messages by category
Web browser console messages are mainly classified into three groups: error, warning, and info.
mistakes
To specifically print error messages to the console using the console.error () method, error messages are displayed in red font.
console.error('error message'); Warnings
To print the warnings, use the following. As in most scenarios, warning messages are displayed in orange:
console.warn('warning message');Info
To print general console information, use the console.info () method:
console.info('general info message') It is easy to filter or find messages in the browser console when they are categorized correctly.
Monitoring the progress of the program
Use the console.trace () to print a stack trace of the progress or execution of the program. 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 (like 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 will get a stack trace of the function calls printed in last order, first out (LIFO) because it’s a stack.
Running the timing program
To measure the time that an operation takes to execute in your program, you can use the console.time () method. console.time () is generally used with the console.timeEnd () method where the latter is used to end the timer.
You can have up to 10,000 timers running per web page, which emphasizes the importance of properly labeling your timers.
To measure the time it takes for a for loop to cycle through numbers 1 through 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');
Account
the console.count () method is used to keep track of the number of times a function or piece of code has been called in a program. For example, we can track the number of executions of a for loop as follows:
for(i=0; i<4; i++ ){
console.count();
}Grouping log messages
Like the timer method, the console.group (), and console.groupEnd () the methods are generally used in pairs.
The group method helps you organize your journal messages better. 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 in the warning group are visually categorized as shown in the output below.
Clear console
Finally, here are several ways to clear log messages in your browser’s 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
Optimal use of the browser console
This guide has shown you some of the different web browser console methods available to help you debug front-end applications. The console API is very light, easy to learn, and widely supported in most modern browsers.
Take a CAPTCHA validation form for your next project and put your new debugging skills to the test!
Read more
About the Author
