The JavaScript Console offers convenient methods that allow users to execute JavaScript code directly within the browser environment. It is commonly utilized for a range of purposes, including outputting code results or troubleshooting code through the Console. Beyond the widely recognized console.log method, there are several alternative strategies that can be employed for various tasks, such as recording errors, issuing warnings, and more.
What is a Web Console?
A web console serves as a debugging utility within a browser, designed to capture a range of information pertaining to web pages, including JavaScript, network requests, warnings, CSS issues, and other errors. In essence, this tool allows users to engage with the web page by executing JavaScript code directly in the Web console.
It is important to understand that executing code in the Console only allows us to see the modifications without actually altering the original content of the web page. When the web page is refreshed, any changes made in the Console for that specific page will be completely discarded.
Install DevTools
Before we proceed, let’s configure the DevTools that will be utilized throughout this article. DevTools are essentially a set of developer utilities aimed at enhancing and streamlining the process of package development. By employing DevTools, we can manipulate web pages in real-time and efficiently pinpoint problems related to them. The way you access DevTools may vary based on the browser you are using.
In this article, we will utilize Google Chrome as our case study. The DevTools feature includes a console interface that can be accessed from this location.
1st Approach
The menu icon located in the upper left section of Chrome can be utilized to open DevTools. Refer to the illustration provided below.
- The JavaScript developer console is a component of DevTools.
- Within the Console, a basic Console log statement can be found.
2nd Approach
Employing the inspect feature presents an alternative approach to accomplishing this task. Every web page includes an inspect option accessible via a right-click; this feature is generally the last choice in the context menu. Upon selecting the inspect option, the DevTools will launch, allowing you to easily navigate to the Console from that interface. Refer to the illustration provided below.
Expedited and Convenient Method
- The expedited method, utilizing the shortcut keys ctrl+shift+I or ctrl+shift+J, is the final technique but certainly not the least significant. To promptly access the JavaScript Console on this page, implement this shortcut immediately.
- Upon your initial use of DevTools, you will encounter several sections, such as Element selector, responsive view, Elements, Console, Sources, Network, Performance, Memory, and more.
The various sections within DevTools are instrumental in assessing the HTML structure of a webpage. This encompasses acquiring HTML elements, scrutinizing CSS, retrieving class names, examining JavaScript, and exploring numerous other aspects such as network requests and memory usage. Now, let’s delve into the methods by which we can access and alter the JavaScript of any web page.
Console object in JavaScript
The browser's debugging feature, essentially a Web Console, can be accessed via the Console, which functions as an object (specifically a property of the window object). This section will discuss some of the built-in methods associated with the console object. When utilized effectively, these methods can greatly assist developers. The Console can be accessed using either window.Console or simply console, as it is a property of the window object (this is the most commonly used approach).
The console object in JavaScript gives access to the browser debugging Console. Using Ctrl + Shift + I for Windows or Command + Option + K for Mac, we may launch a console in a web browser. The console object offers us a variety of methods, including:
- log
- error
- warn
- clear
- time and timeEnd
- table
- count
- group
- groupEnd
- groupCollapsed
- assert
- info
- trace
- Custom console logs for the functions
JavaScript console.log Method
The most recognized method in the JavaScript Console is log, which serves the purpose of writing or logging data to the Console.
Syntax
The syntax displayed below illustrates the JavaScript console log along with its corresponding value.
console.log(value);
Example
The example provided below demonstrates the fundamental data types and HTML formatting using the log function of the JavaScript console. Through the console log method, we are able to present numerical values, strings, arrays, and object data.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<h4> The JavaScript console.log() method </h4>
<p> Remember to open the Console or Press F12 and see the output. </p>
<script>
console.log(2134);
console.log("I am a working on console log");
console.log(document.body);
console.log([5, 4, 3, 2, 1]);
console.log({english:81, Maths:82, coding:93});
</script>
</body>
</html>
Output
The image shows the log value as an output.
JavaScript console.error Method
True to its name, the error function sends an error message to the Console. The red error icon acts as a visual hint indicating its occurrence. We are able to present error messages as well as messages related to unmet conditions.
Syntax
The syntax provided below illustrates the error generated in the JavaScript console along with its corresponding value.
console.error(value);
Example
The subsequent illustration demonstrates the fundamental data or error notification by employing the error function available in the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<h4> The JavaScript console.error() method </h4>
<p>Remember to open the Console or Press F12 and see the output.</p>
<script>
//Console.error() method
console.error('This is a error message to console');
let age = 14;
if(age > 12){
console.error("Sorry, you are not eligible for child section");
}
</script>
</body>
</html>
Output
The image shows the log value as an output.
JavaScript console.warn method
True to its name, the warn method generates a warning message that is displayed in the Console. The yellow warning icon accompanied by the text makes it readily identifiable.
Syntax
The syntax outlined below demonstrates the use of the console.warn method in JavaScript, along with its associated value.
console.warn(value);
Example
The subsequent example demonstrates how to utilize the warn method of the JavaScript console to display a conditional data or warning message. In the context of secure login, we examined whether the entered password corresponded with the user's password. When a mismatch occurred, we employed the warn method to generate a warning message stating, "Password is not same."
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<script>
//Console.warn() method
console.warn('This is a error message to console');
let age = 14;
if(age > 12){
console.warn("Sorry, you are not eligible for child section");
}
let paswrd = 4321;
const usrPaswrd = 5867;
let enter = false;
if(paswrd == usrPaswrd ){
enter = true;
}else{
console.warn("Password does not same!");
}
</script>
</body>
</html>
Output
The given image shows the log value as an output.
JavaScript console.clear method
The clear function, as suggested by its designation, removes all content from the Console, resulting in a completely blank console display.
Syntax
The syntax provided below illustrates the method used in JavaScript to clear the console.
console.clear();
Example
The example below illustrates the use of the clear function in the JavaScript console. When you input data into the Console and subsequently invoke the clear console method, this function will remove all content from the Console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<h4> The JavaScript console.error() method </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
console.log(2134);
console.log("I am a working on console error");
console.clear();
</script>
</body>
</html>
Output
The image shows the log value as an output.
JavaScript consoletime and timeEnd methods
The time function initiates a timer measured in milliseconds and requires a parameter that serves as the identifier for the timer. In order to stop the timer and obtain the elapsed time (the duration from when the timer was initiated to when it was stopped) as output in the Console, it is essential to provide the identical label to the timeEnd function.
Syntax
The syntax presented below illustrates the time method available in JavaScript's console.
console.time();
The syntax below demonstrates the usage of the timeEnd method available in the JavaScript console.
console.timeEnd();
Example
The subsequent illustration demonstrates the usage of the time and timeEnd functions within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<h4> The JavaScript console.time() and timeEnd() methods </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
console.time("timerValue");
console.timeEnd("timerValue");
console.time('timedata');
let function1 = function(){
console.log('first function is running');
}
let function2 = function(){
console.log(' second function is running..');
}
Function1();
function2();
console.timeEnd('timedata');
</script>
</body>
</html>
Output
The image shows the time value as an output.
JavaScript console.table Method
The Console.table function serves to present data in a tabular format. When utilized, it showcases the array values in the Console as a structured table.
Syntax
The syntax outlined below demonstrates how to present data in a tabular format using the JavaScript console.
Console.table(table_data, table_columns);
Description
- The table_data is essential for presenting information. This data will serve to fill the table.
- The table_columns is not mandatory. It is an array that holds the titles of the table columns.
Example
The example below demonstrates the utilization of the table method within the JavaScript console. When you input data into the Console and subsequently invoke the clear console method, it will erase all data present in the Console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<h4> The JavaScript console.table() method </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
console.table({sitename:"Example", mode:"website"});
console.table(["Ram", "shyam", "maan"]);
</script>
</body>
</html>
Output
The image shows the table value as an output.
JavaScript console.count Method
The count function is utilized to determine the frequency with which the JavaScript console has been invoked. The iteration count or tally number is displayed in the Console through the use of the count function.
Syntax
The syntax provided below illustrates how to utilize the JavaScript console for presenting data in a tabular format.
console.count(label);
Parameter
- The term "Default" represents the standard label. We have the option to create an alternative label according to our needs.
Example
The example below demonstrates the utilization of the count method within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
for (let a = 0; a < 4; a++) {
console.count();
}
for (let a = 5; a > 3; a--) {
console.count('Decrement');
}
</script>
</body>
</html>
Output
The image shows the count value as an output.
JavaScript console.group Method
The group function serves the purpose of encapsulating various pieces of data within a unified format. Additionally, we can utilize the multiple group method to establish a nested group function.
Syntax
The syntax below illustrates how to utilize the JavaScript console for presenting group data.
console.group(label);
Parameter
- The label for the Console is not mandatory. We have the flexibility to create group labels according to our needs.
Example
The subsequent illustration demonstrates the utilization of the group method within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
for (let a = 0; a < 4; a++) {
console.group("values");
console.count();
}
for (let a = 5; a > 3; a--) {
console.group("data");
console.count('Decrement');
}
</script>
</body>
</html>
Output
The image shows the group value as an output.
JavaScript console.groupEnd Method
The groupEnd function serves to conclude the group function and encapsulate the necessary information within the console.group function.
Syntax
The syntax provided below demonstrates how to utilize the JavaScript console to halt the execution of the group function.
console.groupEnd();
Parameter
- It is important to note that any label and data should avoid utilizing the groupEnd function.
Example
The example below demonstrates the use of the group method within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Console </title>
</head>
<body>
<p> Remember to open the Console or Press F12 and see the output. </p>
<script>
for (let a = 0; a < 4; a++) {
console.group("values");
console.count();
console.groupEnd();
}
for (let a = 5; a > 3; a--) {
console.group("data");
console.count('Decrement');
console.groupEnd();
}
</script>
</body>
</html>
Output
The image shows the groupEnd value as an output.
JavaScript console.groupCollapsed Method
The groupCollapsed function serves to initiate a message group that is in a collapsed state. To unveil a new message group within the Console, click on the expand button. Subsequently, the majority of the new messages will be directed to this particular group.
Syntax
The syntax below demonstrates how to utilize the groupCollapsed function within the JavaScript console.
console.groupCollapsed(label);
Parameters
- The label serves as an optional argument within the function. The "default" setting corresponds to the standard data.
- We have the ability to adjust the label value according to our needs.
Example
The subsequent illustration demonstrates the utilization of the groupCollapsed function in the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
for (let a = 0; a < 4; a++) {
console.groupCollapsed();
console.count();
console.groupEnd();
}
console.groupCollapsed("data");
console.log('Data display inside of the function');
console.groupEnd();
console.log('Data display outside of the function');
</script>
</body>
</html>
Output
The displayed image illustrates the output corresponding to the groupCollapsed value.
JavaScript console.assert Method
The assert function serves the purpose of presenting a message when an expression evaluates to false or indicates erroneous data. Conversely, if the expression yields a true value, the Console will display the corresponding data.
Syntax
The syntax outlined below illustrates how to utilize the assert function within the JavaScript console.
console.assert(expression, label);
Parameters
- The expression is the essential input parameter for the console method.
- The label is an optional parameter in the JavaScript method. The "Assertion failed: console.assert" output is the default method.
- We can modify and write the required label as an output message.
Example
The example below demonstrates the utilization of the assert function within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<h4> The JavaScript console.assert() method </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
let a1 = 6;
let a2 = 4;
console.assert(a1 + a2 == 12, "Expression returns 'false' value");
let a3 = 3;
let a4 = 4;
console.assert(a3 * a4 == 11);
for (let a = 1; a < 4; a++) {
console.assert(a1 = 0, "Expression does not returns 0 value");
}
</script>
</body>
</html>
Output
The visual displays the assert data presented as an output.
JavaScript console.info Method
The info function serves the purpose of presenting messages or details regarding the code execution or the output required by the user. It can display straightforward messages, data from arrays, and various other values. Additionally, it can represent Boolean values as either true or false, or it can transmit the values of variables as well.
Syntax
The syntax below demonstrates how to utilize the info function within the JavaScript console.
console.info(message);
Parameters
- The message serves as the fundamental input parameter utilized by the console.info method.
Example
The subsequent illustration demonstrates the utilization of the info method within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<h4> The JavaScript console.info() method </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<script>
const myinfo = {website: "Example", mode: "Online"};
console.info(myinfo);
const myinfo2 = [2, 5, 6, 8];
console.info(myinfo2);
let a1 = 6;
let a2 = 4;
console.info (a1 + a2 == 12);
let a3 = 3;
let a4 = 4;
console.info(a3 * a4 == 12);
for (let a = 1; a <= 4; a++) {
console.info(a);
if(a > 3){
console.info (a1 = 0);
}
}
console.info ("Good Work");
</script>
</body>
</html>
Output
The image shows the information as an output.
JavaScript console.trace Method
The trace method serves the purpose of tracking the function and displaying the necessary JavaScript function. This function operates by retrieving the accessible JavaScript functions and tracing them for future reference. It provides assistance to developers and users who are dealing with extensive JavaScript code.
Syntax
The syntax illustrated below demonstrates the usage of the trace method within the JavaScript console.
console.trace();
Example
The subsequent illustration demonstrates the use of the trace function within the JavaScript console.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Console</title>
</head>
<body>
<h4> The JavaScript console.trace() method </h4>
<p> Remembers to open the Console or Press F12 and see the output. </p>
<button onclick = "myData()"> Trace </button>
<script>
function myData() {
myOtherData();
myData2();
mylastData();
}
function myOtherData() {
console.trace();
}
function myData2() {
console.trace();
}
function mylastData() {
console.trace();
}
</script>
</body>
</html>
Output
The image shows the trace value as an output.
Conclusion
The methods available in the JavaScript console serve as valuable tools for both users and developers to retrieve necessary information. Utilizing the console function does not influence the operational capabilities of applications or websites.