217

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)?

2

7 Answers 7

166

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);

enter image description here

4
  • 1
    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, 2017 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? Oct 3, 2018 at 6: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 2, 2020 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, 2020 at 2:06
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

5
  • 68
    In Chrome debug() comes up in blue and log() in black May 31, 2015 at 4:38
  • 48
    A serious improvement over log(). Jun 19, 2015 at 1:06
  • 44
    From 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, 2017 at 0:51
  • Using Debug in Chrome: Calling Debug are not Allowed May 25, 2019 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, 2022 at 1:48
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).

3
  • 3
    Hi, this seems true, but I am unable to find any information on this behavior. The Chrome docs do not mention it as of today.
    – oligofren
    Aug 29, 2017 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, 2017 at 11:28
  • 3
    This is the most relevant answer. Everyone mentions colors but this is IMO more important.
    – DurkoMatko
    Sep 2, 2019 at 13:26
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:

3
  • Console.info prints blue color, console.warn prints yellow color and console.error prints red color
    – shivgre
    Jul 27, 2016 at 5: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, 2016 at 6: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, 2016 at 6:46
11

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▸ {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.

1
6

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.

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/

1
  • 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 Jan 29, 2016 at 8:51

Your Answer

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

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