Logging in to the browser console

0


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.

Related: 6 JavaScript Frameworks That Are Worth Learning

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`); 

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) 

exit from the console directory in the browser

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.

console output age display

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

browser console output in table format

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.

output from a console stack trace

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');

time output from web browser console

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

count method web browser console output

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.

message output from the grouping console

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!


Form validation code
Create a CAPTCHA validation form using HTML, CSS, and JavaScript

Secure your websites with CAPTCHA validation.

Read more


About the Author

.

Leave A Reply

Your email address will not be published.