Print in JavaScript Console Using Log, Info, Warn, and Error

The JavaScript console is a tool in web browsers that helps you print the result to the web browser. It shows messages and errors to detect what happens in your application. and also logs from JavaScript code.

Developers use it to find and fix problems. The console displays details about issues and warnings.

In this article, you will learn how to print in the JavaScript console using many functions such as:

• log
• error
• info
• warn

Understand What the Console Is

The console is a tool that lets you interact with a program or browser, or even a server. That is when you type commands and see output directly. In web development, the console usually means the browser’s developer console (found in Chrome, Firefox, etc.).

You open it to:

• See messages or errors from your code.
• Test JavaScript snippets quickly.
• Debug problems by checking variable values or program flow.

The console can also mean a terminal or command-line interface (CLI) in programming.

So, developers use it to:

• Run programs.
• Install software or libraries.
• Manage files.
• Control servers.

The question is: Why use the console?

• It allows you to see error messages right away.
• Try small bits of code without editing full files.
• Find and fix issues easily when you check logs or run tests.
• Perform tasks faster than clicking through menus.
• It uses commands not available through normal interfaces.

That was for programming language, but in web applications, you can use the console through the browser.

You need to follow the steps below to open the Inspect Element in Chrome browser:

1. Open the Chrome browser.
2. Navigate to the web page you want to inspect.
3. Right-click anywhere on the page.
4. Select Inspect from the menu that appears.
5. Click the Console tab at the top of the panel that opens.
6. Now you can view messages, errors, and run JavaScript commands directly in the console.

So, let’s move on to the following section to understand how the console.log() works and how to print to the JavaScript console.

The JavaScript console.log() Function

The console.log() function in JavaScript prints messages to the console. It helps you see what your code is doing.

Here is the syntax:

console.log(message);

The message can be text or numbers. Also, it can be objects or arrays, or anything you want to check.

Here is an example:

console.log('Hello, flatcoding students!');
console.log(42);
console.log([1, 2, 3]);
console.log({ name: 'Alice', age: 25 });

Output:

Hello, flatcoding students!
42
[ 1, 2, 3 ]
{ name: 'Alice', age: 25 }

You can log multiple things at once:

console.log('Age:', 25, 'Name:', 'Alice');

Here is the output:

Age: 25 Name: Alice

So, why do you have to use console.log() in JavaScript?

• It allows you to see values at different steps in your code.
• It checks which parts of the code are running.
• Quickly print out the results in the development mode.

In the following section, you will learn another function, which is console.info().

How console.info() Works in JavaScript

The console.info() in JavaScript works almost exactly like console.log(). It prints a message to the console.

For example:

console.info('This is an info message.');

Output:

• It displays information messages.
• It looks the same as console.log() in most browsers.
• Some browsers may add a small icon or style to highlight it as “info.”

You use it:

• To show general information that is not an error or warning.
• To separate important notes from normal log messages.

So, the question is: what is the difference between console.log() and console.info() in JavaScript?

The Difference Between console.log() and console.info() in JavaScript

The console.log() and console.info() both print messages to the console. They work the same, but are meant for different purposes, such as:

• log for general output.
• info for informational messages.

Here’s a simple table:

Let’s move on to the following section to learn about another console function: console.error().

The JavaScript console.error() Function

The console.error() function in JavaScript prints error messages to the console. It highlights problems clearly.

Here is an example:

console.error('Something went wrong!');

Here is the output:

• It shows messages in red (in most browsers).
• It helps you spot errors.
• Some browsers let you click the error to jump to the line of code that caused it.

You use it:

• When something unexpected happens.
• To alert yourself or other developers about issues that need fixing.

Here is another example with an object:

console.error({ code: 500, message: 'Internal Server Error' });

The output:

Now that you know how console.error() highlights problems, let’s look at how console.warn() helps you catch the warning message before it turns into bigger issues.

Understand the console.warn() Function in JavaScript

The console.warn() function in JavaScript displays warning messages in the console. It alerts you about potential problems. It doesn’t need you to stop the code.

For example:

console.warn('This action is not recommended.');

The output:

• It shows messages in yellow or with a warning icon (in most browsers).
• It signals that something might cause issues later.
• It does not stop the program from running.

You use it:

• To warn about bad practices.
• To point out deprecations or risky actions.
• That reminds you or others about possible improvements.

Wrapping Up

In this tutorial, you learned how to use different functions in the JavaScript console, such as:

• console.log()
• console.info()
• console.warn()
• console.error()

Each of these functions serves a specific purpose to help you log messages and warnings. Also, it helps you show errors while it debugs or tests your JavaScript code.

Here is a quick recap:

• console.log() for general output and debugging. It helps you inspect values and the flow of your code.
• console.info() similar to console.log(), but meant for informational messages that aren’t errors or warnings.
• console.error() highlights error messages in the console. It displays the message in red color to catch your attention.
• console.warn() displays warning messages, often in yellow, to alert you about potential issues without stopping the execution of the code.