Difference between console.log() and console.debug()?

Question

Google has not been helpful for me, since searching for "console.debug" just brings up a bunch of pages that have the words "console" and "debug" on them.

I'm wondering what the difference is between console.log() and console.debug(). Is there some way to use a bunch of console.debug() statements and then just flip a switch to easily shut off all debug statements from being sent to the console (like after launching a site)?

Here is how to disable the console.log outputs http://stackoverflow.com/questions/1215392/how-to-quickly-and-conveniently-disable-all-console-log-statements-in-my-code — frazras, Mar 30 '15 at 18:14
You can put colors. console.log('%c Sample Text', 'color:green;'); Or add some VAR in the text using: console.log(\`Sample ${variable}\`, 'color:green;'); — Gilberto B. Terra Jr., Jan 29 '19 at 11:25

score 162 · Answer 1 · edited Aug 27 '21 at 11:07

162

Technically console.log console.debug and console.info are identical However the way they display the data is little different. console.debug is not visible by default in the browser's JS console. It can be enabled by using the console's filter options.

console.log Black color text with no icon

console.info Blue color text with icon

console.debug Pure black color text

console.warn Yellow color text with icon

console.error Red Color text with icon

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

edited Aug 27 '21 at 11:07

Elliot Huffman

172
3
18

answered Apr 01 '16 at 11:19

Prabhakar

6,458
2
40
51

In google chrome browser `info` level logs are simply shown with an icon (same as in the snapshot) but the text (`console.info` text in your post) is in black color and background color of the row is white. Possibly your snapshot for firefox browser. – RBT Apr 24 '17 at 10:26
5

Thanks for the answer, very clear with the screenshot. Gotta ask though, why the string concatenation? Why not just `console.log("Console.log");` instead of `console.log("Console.log" + " " + playerOne);`? What does the `" " + playerOne` do? – hofnarwillie Oct 03 '18 at 06:51
In my console, I get the same display with `console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");` – kotchwane Jun 02 '20 at 10:43
3

It's also a good idea to note that, console.error and console.warn output to stderr, while the others output to stdout – Chris Dec 10 '20 at 02:06

Pete TNT · Accepted Answer · 2015-02-09T05:56:03.223

82

For at least IE, Firefox and Chrome consoles, .debug() is just an alias for .log() added for improved compatibility

https://developer.mozilla.org/en-US/docs/Web/API/console

https://developers.google.com/chrome-developer-tools/docs/console-api#consoledebugobject_object

https://msdn.microsoft.com/en-us/library/ie/hh772183(v=vs.85).aspx

edited Feb 09 '15 at 05:56

answered Feb 19 '14 at 09:45

Pete TNT

8,293
4
36
45

68

In Chrome `debug()` comes up in blue and `log()` in black – Simon_Weaver May 31 '15 at 04:38
48

A serious improvement over log(). – Vael Victus Jun 19 '15 at 01:06
43

From https://developer.mozilla.org/en-US/docs/Web/API/console: **console.debug()** - _Note: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected._ – cilf Oct 18 '17 at 00:51
Using Debug in Chrome: Calling Debug are not Allowed – Masoud Bimmar May 25 '19 at 14:36
1

Not only alias. In Chrome, the Log level for `debug()` is Verbose, but for `log()` it is Info. – Míng Mar 17 '22 at 01:48

user2486570 · Answer 3 · 2019-06-09T19:35:42.177

52

They are almost identical - the only difference is that debug messages are hidden by default in recent versions of Chrome (you have to set the log level to Verbose in the Devtools topbar while in console to see debug messages; log messages are visible by default).

edited Jun 09 '19 at 19:35

answered May 03 '17 at 17:37

user2486570

902
8
14

3

Hi, this seems true, but I am unable to find any information on this behavior. The [Chrome docs](https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object) do not mention it as of today. – oligofren Aug 29 '17 at 11:27
4

Now I finally understood "set log level to Verbose on top of console". You mean in Dev Tools there is the console at the bottom. At the top of this section, along with Filter and the frame selector, there is also a verbosity drop down for the logs (preset to "Info") – oligofren Aug 29 '17 at 11:28
3

This is the most relevant answer. Everyone mentions colors but this is IMO more important. – DurkoMatko Sep 02 '19 at 13:26

Venkat · Answer 4 · 2018-12-10T09:40:33.360

17

console.info ,console.debug methods are identical to console.log.

console.log Printing statement
console.info Black color text with "i" icon in blue color
console.debug Blue Color text

Documentation:

edited Dec 10 '18 at 09:40

answered Dec 31 '15 at 05:36

Venkat

2,549
2
28
61

Console.info prints blue color, console.warn prints yellow color and console.error prints red color – shivgre Jul 27 '16 at 05:00
I have tested in the Chrome 52.0.2743.82 Console.Info prints in black color with blue icon, Console.warn prints in black color with yellow icon console.error prints in Red color with red icon – Venkat Jul 27 '16 at 06:25
please edit your answer accordingly so that I can upvote or remove downvote, did you notice the blue colored "i" icon before the printed text while using console.info() – shivgre Jul 27 '16 at 06:46

score 10 · Answer 5 · answered Nov 17 '18 at 21:04

If you want the ability to disable logging after a product is finished you could override the console.debug() function or make another custom one.

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

Foo&blacktriangleright; {age: 41, name: "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

No output

However I havent figured a way to color the outputs as well.

works well with using ANSI escape codes for coloring: https://stackoverflow.com/a/41407246/1175053 — C S, Sep 07 '20 at 15:10

score 6 · Answer 6 · answered Jul 05 '22 at 08:14

I know it's old, but to continue on @Espen's answer, you can separate responsibilities and use console.log for your regular logs that should also appear on production, and for console.debug you can do something like that:

if (env === 'production') {
   console.debug = function () {};
}

This will override console.debug and it won't print anything. This way you don't have to worry about things that should appear in prod environment.

score 2 · Answer 7 · edited Feb 11 '16 at 08:37

2

From Documentation of browsers,The log,debugand also info methods are identical in implementation wise but varies in color and icon

https://jsfiddle.net/yp4z76gg/1/

edited Feb 11 '16 at 08:37

Venkat

2,549
2
28
61

answered Jan 29 '16 at 08:30

1

This should be a comment or add more explanation with answer for how both are identical or no difference to understand OP and others.Thanks – ρяσѕρєя K Jan 29 '16 at 08:51

Difference between console.log() and console.debug()?

7 Answers7

Linked