150

What is the benefit of using console.log vs console.info? Or any of the other console commands for that matter?

console.info("info");
console.error("error");
console.warn("warn");

vs

console.log("log");

I thought it might change the color of the output or concatenate some sort of label, but they seem to all do the same thing. And according to the documentation here:

https://nodejs.org/api/console.html#console_console_info_data

they seem to all do the same as console.log

3
  • Possible duplicate of: stackoverflow.com/questions/14437428/… Dec 14, 2017 at 0:19
  • 3
    Some tips: You can use colors to have a better view of: console.log('%c Sample Text', 'color:green;'); Or add some VAR in the text using: console.log(`Sample ${variable}`, 'color:green;'); Jan 29, 2019 at 11:31
  • I definitely wrap all my logging functionality in an in house adapter or some logging library but I think the difference between log and info is an interesting idealogical question. I personally think debug is (naturally) for debugging, log is for extra context that may be verbose (contrary to Chrome's devtools logging levels filter) and info is for logging important context changes like a routing change in a SPA or sign-in/out changes. Honestly still an up-to-you / YMMV situation imo ‾\_(ツ)_/‾
    – Keego
    Sep 16, 2022 at 3:16

11 Answers 11

123

According to the documentation that you linked to, console.error and console.warn output to stderr. The others output to stdout.

If you are doing piping or redirection from node.js the difference is important.

There is a lot of JavaScript written to run in both the browser and Node.js. Having node implement the full console allows for greater code cross-compatibility.

In most browsers, not only do these log in different colors, but you can also filter to see specific messages.

console.debug("debug"); // Likely hidden by default
console.info("info");
console.error("error");
console.warn("warn");
console.log("log");

2
  • 1
    Thank you! It was the browser where it shows up differently. I was looking in terminal for the color changes. Aug 27, 2014 at 16:57
  • 3
    In node (8.11.4) and Chrome 67, there's also console.debug (and quite likely earlier versions as well). debug ranks below log. Oct 4, 2018 at 20:02
88

While console.log and console.info might seem the same, with only mere coloring differences (in most browsers), you can take advantage of having these differently named functions.

For example, you can configure a linter like eslint to produce a warning message whenever console.log is used but no warnings for console.info. Now you can use console.log for temporary development/debug logging and console.info for information that end users might need. The linter warnings will remind or even force you to removed the temporary console.log calls before commits code or publishing release builds.

3
  • 4
    I dont know why I found this answer more appropriate then all others, nice one @Figidon . Jun 13, 2018 at 7:39
  • 1
    I concurr. Great solution to use with eslint for dev and production mode. You shall not pass console.log! (staff and sword in hand) Jan 10, 2020 at 12:17
  • Also monitoring tools, such as DataDog, automatically place logs produced by console.info, console.error, and console.warn into the categories "Info", "Error", and "Warn" respectively which allows for further log filtering.
    – uzluisf
    Mar 3, 2023 at 14:51
32

According to the docs it's pretty clear.

console.info([data], [...])# Same as console.log.

console.error([data], [...])# Same as console.log but prints to stderr.

console.warn([data], [...])# Same as console.error.

This means there is no benefit or downside. info == log, and warn == error. Unless you want to print to stderr, info and or log will work.

1
  • 1
    I mean, log vs info may be ambiguous but I'm pretty sure the concept of warnings vs errors is a thing in software development. Chrome dev console will log a stack trace for both warn and error but they're colored differently. Similar with running tests in Jest with Node
    – Keego
    Sep 16, 2022 at 3:10
28

Visually, No difference actually among console.log , console.info , console.warn , as well as console.error regarding the server side(terminal).

However, there are lightweight modules that add blue, orange and red colors for console.info , console.warn , as well as console.error respectively . By that, console API behaves like client-side.

 npm i console-info console-warn console-error --save-dev;

enter image description here

12

One more detail in addition to the accepted answer: In Chrome and FireFox, console.info log lines are prefixed with a little i icon while console.log lines are not. warn and error lines are prefixed with a little triangle and x, respectively.

2
  • As observed elsewhere: Firefox 78: prints ⓘ (i in circle) before log.info output. Chrome 84: doesn't
    – Tom Hundt
    Jul 28, 2020 at 17:23
  • Is it possible that the behavior for console.info was changed? I don't see any "i icon" in Chrome...
    – gignu
    May 29, 2022 at 20:41
9

stdin A readable stream for reading input from the user.

stdout A writable stream, either synchronously or asynchronously.

stderr A blocking synchronous writable stream intended for error messages.

The stdout or non-blocking functions are: console.log, console.info, util.puts, util.print and Stderr.

The blocking functons are: console.warn, console.error, util.debug and process.stdin (a readable stream for getting user input).

6

I have seen where console.log is for temporarily logging of state information for debugging.

console.info is a more permanent thing - such as saying what port something is running on, and something you wouldn't cut out after you are done debugging.

This makes it easy to clean up your code for committing it. You can even have your linter have a rule to prevent console.log from being committed.

5

It has been established that log and info are basically the same thing, but I'm not sure that completely answers the question:

What is the benefit of using console.log vs console.info?

One benefit, apart from what has already been mentioned, is you can use each for a different purpose. For example, you might use console.log just for quick debugging and spitting things out to the console, while you might use console.info for permanent messages you want to output to the console in your code, such as information on the current app status. Then when you have a situation where a random object is printed in your console and you realize you've left a log statement in there somewhere by accident, you can do a global search for 'console.log' and delete every instance and have confidence you didn't delete anything important that you meant to leave in there.

4

There is a difference for React devs. It comes from an issue in the react devtool extension and at least affects Create-React-App users, not sure if it's all web pack.

Issue is mentioned here: react devtools console.log() from react_devtools_backend.js:4049

but the jist is: console.log will always report its source as

react_devtools_backend.js:4049 

wheres console.info will have the actual filename and line number you're logging from.

1
  • 2
    Useful, even 6 years later, to know this.
    – mckenzm
    Nov 7, 2021 at 21:56
2

The different logging levels let you manage the noise level in your console: In both the Firefox (I'm using 78 right now) and Chrome (84) devtools, the js console lets you choose what "debug level" of output you want to see. FF lets you toggle the visibility of console.error, .warn, .log, .info, and .debug messages by clicking individual buttons for each (that show you how many were suppressed, when "off"), whereas Chrome has a dropdown with checkmarks next to the items (.info and .log are controlled by the "Info" one, and .debug by "Verbose"). The Chrome dropdown label ("All levels" or whatever you set) turns red if output was suppressed.

0

The problem with debugging real (i.e. large) applications, is that when they fail, you can't just check the code and rerun the app on your machine. You have to read the (often massive) logs file, and hope you notice something that is out of place.

To make this work easier, you use hierarchies of severety for your log messages. You start from the most severe error, then work backwards, looking at progressively more granular messages, until some message shows you what went wrong.

The implementation for different logging functions may be practically the same, in that the messages end up in the same output. However, this doesn't make them "the same". The severety of the error is important. If your messages are annotated appropriately, you will be able to search through the logs, skipping the noise.

Here's a possible interpretation of the levels in console

Level Use
Degug Low level info that is only relevant during development
Info Details about what the program is doing
Log High-level tracking about the state of the program
Warn Something is wrong; nothing has failed yet
Error The process didn't do what it was supposed to
Assert The fundamental assumptions of the program have been broken. Anything after this can be garbage

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.