How to Print in JavaScript Console

In this article, we will explore the method of outputting messages to the JavaScript console.

Printing means showing the output or getting the result on the screen. There are different methods to print the output to the console which are as follows:

• ✅ Utilizing console.log
• ✅ Utilizing console.info
• ✅ Utilizing console.warn
• ✅ Utilizing console.debug
• ✅ Utilizing console.error
• ✅ Utilizing console.assert
• ✅ Utilizing console.count
• ✅ Utilizing console.group and console.groupEnd
• ✅ Utilizing console.table
• ✅ Utilizing window.alert
• ✅ Utilizing document.write
• ✅ Utilizing innerHTML
• ✅ Utilizing textcontent
• ✅ Utilizing window.print

We will thoroughly explore each method individually, utilizing demonstrations to enhance our understanding.

Utilizing console.log

The function console.log is a native method employed to output results to the console.

Demo-1:

We will employ the console.log function to display the output.

Code:

console.log("Hello There!");

Output:

We can witness the output to the console.

Demo-2:

We will employ the console.log function to output a single value.

Code:

let x = 5;
console.log("x:", x);

Output:

In the output presented, we can observe that the value of x displayed below is 5.

Demo-3:

We will employ the console.log function to display various values.

Code:

let x = 6;
let y = 10;
let z = 24;
console.log({x, y, z});

Output:

Below is the output where we can observe several values displayed on the console.

Utilizing console.info

The static method console.info is employed to output informational messages to the console.

Demo:

We will employ the console.info function to display the output.

Code:

console.info("It is an informational message.");

Output:

It is evident that the informational message has been output to the console.

Utilizing console.warn

The console.warn method is a static function that is employed to display warning messages in the console.

Demo:

We will employ the console.warn function to display the warning message.

Code:

console.info("It is a warning message.");

Output:

It is evident that a warning message has been outputted to the console.

Utilizing console.debug

The method console.debug serves as a static function that is employed to output debug messages to the console.

Demo:

We will employ the console.debug function to display the debug messages.

Code:

console.info("It is a debug message.");

Output:

We can observe that the debug message appears in the console.

Utilizing console.error

The method console.error serves as a static function that is employed to display error messages in the console.

Demo:

We will employ the console.error function to display the output.

Code:

console.info("It is an error message.");

Output:

It is observable that the error notification is outputted to the console.

Utilizing console.assert

The console.assert function is employed to display a message in the console when the provided assertion evaluates to false. Conversely, if the assertion is true, no output will be generated in the console.

Demo:

We will employ the console.assert function to display the message.

Code:

let statement = false;
console.assert(statement, "Here is the reason!");

Output:

It is evident that the assertion is incorrect, which results in the message being displayed on the console.

Utilizing console.count

The console.count function is employed to display the count in the console.

Demo:

We will employ the console.count function to display the counting results.

Code:

for(k = 0 ; k < 5 ; k++) {
  console.count();
}

Output:

It is observable that the console.count function outputs the count to the console.

Utilizing console.group and console.groupEnd

The console.group function is employed to initiate a message group within the console, while the console.groupEnd function is used to terminate that message group.

Demo:

We will employ the console.group function along with the console.groupEnd function to initiate and conclude the grouping of messages in the console.

Code:

console.log('This message is not in a group.')

console.group();
console.log('A group message starts here.')
console.log('A group message end here.')
console.groupEnd();

console.log('This message is not in a group.')

Output:

We can witness the group message to the console.

Utilizing console.table

The method console.table is employed to output a table format in the console.

Demo:

We will employ the console.table function to display the table.

Code:

let cars = [
  {
    Model: 'Q3',
    brand: 'Audi'
  },
  {
    Model: 'X1',
    brand: 'BMW'
  },
    {
    Model: 'Amaze',
    brand: 'Honda'
  },
    {
    Model: '296GTS',
    brand: 'Ferrari'
  },
    {
    Model: 'Endeavour',
    brand: 'Ford'
  }
]
console.table(cars);

Output:

In this output, we can observe the table displayed in the console.

Utilizing window.alert

The window.alert function is employed to display pop-up alert messages.

Demo:

We will employ the window.alert function to display the pop-up alert message.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title>Printing the pop-up alert message utilizing the window.alert()</title>
</head>
<body>
        <p>
                Some text.
        </p>
        <script>
                window.alert("Welcome to our tutorial!")
        </script>
</body>
</html>

Output:

The output can be observed as a pop-up window.

Utilizing document.write

The document.write function is employed to display the output in the console.

Demo:

We will employ the document.write method to output content directly into the document.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title>Printing to the console utilizing the document.write()</title>
</head>
<body>
        <script>
                document.write("You are a beautiful girl.");
        </script>
</body>
</html>

Output:

The console displays the output: "You are a beautiful girl."

Utilizing innerHTML

The innerHTML property is employed to retrieve and alter the HTML content.

Demo-1:

In the upcoming demonstration, we will display the output by leveraging the innerHTML property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title>Printing output utilizing the innerHTML</title>
</head>
<body>
        <div id="para"> </div>
        <script>
                document.getElementById("para").innerHTML = "Hi, how are you?"
        </script>
</body>
</html>

Output:

It is observable that the result is displayed on the console through the use of innerHTML.

Demo-2:

In the upcoming demonstration, we will display the sum of two numbers on the console by employing the innerHTML property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title> Printing the addition of two numbers utilizing the innerHTML in JavaScript </title>
</head>
<body>
  <div>
    <p> <b> Addition of 15 and 45: </b> </p>
  </div> 
  <div id="add"></div>
  <script>
      document.getElementById("add").innerHTML = (15 + 45)
  </script>
</body>
</html>

Output:

By employing innerHTML, we can observe the result of adding 15 and 45 displayed on the console.

Utilizing textcontent

The textcontent property is employed to both retrieve and assign the content displayed on a web page.

Demo-1:

In the upcoming demonstration, we will display the output by leveraging the text content.

Code:

<!DOCTYPE html>
<html>

<head>
<title> Printing output utilizing the textcontent in JavaScript </title>
</head>

<body>

  <p id="outcome"></p>

<script>
  document.getElementById("outcome").textContent = "Hello there, have a good day!"
</script>
</body>

</html>

Output:

We can observe that the output is displayed in the console by making use of the textcontent.

Demo-2:

In this demonstration, we will display the product of two numbers in the console using the text content.

Code:

<!DOCTYPE html>
<html>

<head>
<title>Multiplication of two numbers is printed to the console utilizing the textcontent in JavaScript</title>
</head>

<body>

  <div>
    <p>
      <b> Multiplication of 50 and 9: </b>
    </p>
  </div>

  <p id="multiply"></p>

<script>
  document.getElementById("multiply").textContent = 50 * 9
</script>
</body>

</html>

Output:

We can observe that the product of 50 and 9 is displayed in the console by employing the textContent property.

Utilizing window.print

The method window.print is employed to initiate the printing of the content displayed on the active web page.

Demo:

We will generate the output by employing the window.print method.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
        <title>Printing the output utilizing the window.print() in JavaScript</title>
</head>
<body>
        <p>
                Hi there, have a nice day!
        </p>
        <button onclick="window.print();">
                Click to Print
        </button>
</body>
</html>

Output:

In the output section below, we can observe some text accompanied by a button:

Upon clicking the button, the print screen interface appears as illustrated below. From this interface, users have the option to either save the current webpage or send it to the printer for printing.

Conclusion:

In this article, we have explored the techniques for outputting information to the JavaScript console. There are several methods available for printing to the JavaScript console, including console.log, console.info, console.warn, console.debug, console.error, console.assert, console.count, console.table, window.alert, document.write, innerHTML, textContent, window.print, console.group, and console.groupEnd.